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ä
Alex Rickabaugh
parent
c016e2c4ec
commit
d8665e639b
|
|
@ -6,7 +6,7 @@
|
||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵelementStyleProp, ɵɵelementStyling, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '@angular/core';
|
import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵtext, ɵɵtextBinding} from '@angular/core';
|
||||||
|
|
||||||
import {bindAction, profile} from '../../util';
|
import {bindAction, profile} from '../../util';
|
||||||
import {createDom, destroyDom, detectChanges} from '../render3/tree';
|
import {createDom, destroyDom, detectChanges} from '../render3/tree';
|
||||||
|
|
@ -38,7 +38,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
|
||||||
ɵɵelementStart(0, 'tree');
|
ɵɵelementStart(0, 'tree');
|
||||||
{
|
{
|
||||||
ɵɵelementStart(1, 'span');
|
ɵɵelementStart(1, 'span');
|
||||||
ɵɵelementStyling(null, c1);
|
ɵɵstyling(null, c1);
|
||||||
{ ɵɵtext(2); }
|
{ ɵɵtext(2); }
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
ɵɵcontainer(3);
|
ɵɵcontainer(3);
|
||||||
|
|
@ -48,8 +48,8 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
|
||||||
}
|
}
|
||||||
if (rf & ɵRenderFlags.Update) {
|
if (rf & ɵRenderFlags.Update) {
|
||||||
ɵɵselect(1);
|
ɵɵselect(1);
|
||||||
ɵɵelementStyleProp(0, ctx.depth % 2 ? '' : 'grey');
|
ɵɵstyleProp(0, ctx.depth % 2 ? '' : 'grey');
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵselect(2);
|
ɵɵselect(2);
|
||||||
ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' '));
|
ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' '));
|
||||||
ɵɵcontainerRefreshStart(3);
|
ɵɵcontainerRefreshStart(3);
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
* Use of this source code is governed by an MIT-style license that can be
|
* 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
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
|
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵclassMap, ɵɵdefineDirective, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
|
||||||
|
|
||||||
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
|
import {NgClassImpl, NgClassImplProvider} from './ng_class_impl';
|
||||||
|
|
||||||
|
|
@ -35,11 +35,11 @@ export const ngClassDirectiveDef__POST_R3__ = ɵɵdefineDirective({
|
||||||
factory: () => {},
|
factory: () => {},
|
||||||
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
|
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
|
||||||
if (rf & ɵRenderFlags.Create) {
|
if (rf & ɵRenderFlags.Create) {
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & ɵRenderFlags.Update) {
|
if (rf & ɵRenderFlags.Update) {
|
||||||
ɵɵelementClassMap(ctx.getValue());
|
ɵɵclassMap(ctx.getValue());
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
* Use of this source code is governed by an MIT-style license that can be
|
* 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
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵelementStyleMap, ɵɵelementStyling, ɵɵelementStylingApply} from '@angular/core';
|
import {Directive, DoCheck, Input, ɵRenderFlags, ɵɵdefineDirective, ɵɵstyleMap, ɵɵstyling, ɵɵstylingApply} from '@angular/core';
|
||||||
|
|
||||||
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
|
import {NgStyleImpl, NgStyleImplProvider} from './ng_style_impl';
|
||||||
|
|
||||||
|
|
@ -35,11 +35,11 @@ export const ngStyleDirectiveDef__POST_R3__ = ɵɵdefineDirective({
|
||||||
factory: () => {},
|
factory: () => {},
|
||||||
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
|
hostBindings: function(rf: ɵRenderFlags, ctx: any, elIndex: number) {
|
||||||
if (rf & ɵRenderFlags.Create) {
|
if (rf & ɵRenderFlags.Create) {
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & ɵRenderFlags.Update) {
|
if (rf & ɵRenderFlags.Update) {
|
||||||
ɵɵelementStyleMap(ctx.getValue());
|
ɵɵstyleMap(ctx.getValue());
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -502,14 +502,14 @@ describe('compiler compliance', () => {
|
||||||
template: function MyComponent_Template(rf,ctx){
|
template: function MyComponent_Template(rf,ctx){
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$);
|
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.color);
|
$r3$.ɵɵstyleProp(0, ctx.color);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.error);
|
$r3$.ɵɵclassProp(0, ctx.error);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
encapsulation: 2
|
encapsulation: 2
|
||||||
|
|
|
||||||
|
|
@ -2715,7 +2715,7 @@ describe('i18n support in the view compiler', () => {
|
||||||
$r3$.ɵɵi18nStart(1, $I18N_0$);
|
$r3$.ɵɵi18nStart(1, $I18N_0$);
|
||||||
$r3$.ɵɵelement(2, "b");
|
$r3$.ɵɵelement(2, "b");
|
||||||
$r3$.ɵɵelementStart(3, "div");
|
$r3$.ɵɵelementStart(3, "div");
|
||||||
$r3$.ɵɵelementStyling($_c2$);
|
$r3$.ɵɵstyling($_c2$);
|
||||||
$r3$.ɵɵelement(4, "i");
|
$r3$.ɵɵelement(4, "i");
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
$r3$.ɵɵi18nEnd();
|
$r3$.ɵɵi18nEnd();
|
||||||
|
|
|
||||||
|
|
@ -385,13 +385,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
|
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -451,13 +451,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponentWithInterpolation_Template(rf, $ctx$) {
|
template: function MyComponentWithInterpolation_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling();
|
$r3$.ɵɵstyling();
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
|
$r3$.ɵɵclassMap($r3$.ɵɵinterpolation1("foo foo-", $ctx$.fooId, ""));
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
…
|
…
|
||||||
|
|
@ -466,13 +466,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponentWithMuchosInterpolation_Template(rf, $ctx$) {
|
template: function MyComponentWithMuchosInterpolation_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling();
|
$r3$.ɵɵstyling();
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementClassMap($r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
|
$r3$.ɵɵclassMap($r3$.ɵɵinterpolation2("foo foo-", $ctx$.fooId, "-", $ctx$.fooUsername, ""));
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
…
|
…
|
||||||
|
|
@ -481,13 +481,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponentWithoutInterpolation_Template(rf, $ctx$) {
|
template: function MyComponentWithoutInterpolation_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling();
|
$r3$.ɵɵstyling();
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementClassMap($ctx$.exp);
|
$r3$.ɵɵclassMap($ctx$.exp);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -538,15 +538,15 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div", $_c0$);
|
$r3$.ɵɵelementStart(0, "div", $_c0$);
|
||||||
$r3$.ɵɵelementStyling(null, $_c1$, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, $_c1$, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
|
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
|
||||||
$r3$.ɵɵelementStyleProp(0, $ctx$.myWidth);
|
$r3$.ɵɵstyleProp(0, $ctx$.myWidth);
|
||||||
$r3$.ɵɵelementStyleProp(1, $ctx$.myHeight);
|
$r3$.ɵɵstyleProp(1, $ctx$.myHeight);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("border-width: 10px"), $r3$.ɵɵsanitizeStyle);
|
$r3$.ɵɵelementAttribute(0, "style", $r3$.ɵɵbind("border-width: 10px"), $r3$.ɵɵsanitizeStyle);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -598,13 +598,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, ctx) {
|
template: function MyComponent_Template(rf, ctx) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(null, _c0, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, _c0, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myImage);
|
$r3$.ɵɵstyleProp(0, ctx.myImage);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
encapsulation: 2
|
encapsulation: 2
|
||||||
|
|
@ -640,13 +640,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, ctx) {
|
template: function MyComponent_Template(rf, ctx) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(null, _c0);
|
$r3$.ɵɵstyling(null, _c0);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleProp(0, 12, "px");
|
$r3$.ɵɵstyleProp(0, 12, "px");
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -676,7 +676,7 @@ describe('compiler compliance: styling', () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const result = compile(files, angularFiles);
|
const result = compile(files, angularFiles);
|
||||||
expect(result.source).not.toContain('elementStyling');
|
expect(result.source).not.toContain('styling');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -706,13 +706,13 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling();
|
$r3$.ɵɵstyling();
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
|
$r3$.ɵɵclassMap($ctx$.myClassExp);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -763,15 +763,15 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div", $e0_attrs$);
|
$r3$.ɵɵelementStart(0, "div", $e0_attrs$);
|
||||||
$r3$.ɵɵelementStyling($e0_bindings$);
|
$r3$.ɵɵstyling($e0_bindings$);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
|
$r3$.ɵɵclassMap($ctx$.myClassExp);
|
||||||
$r3$.ɵɵelementClassProp(0, $ctx$.yesToApple);
|
$r3$.ɵɵclassProp(0, $ctx$.yesToApple);
|
||||||
$r3$.ɵɵelementClassProp(1, $ctx$.yesToOrange);
|
$r3$.ɵɵclassProp(1, $ctx$.yesToOrange);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("banana"));
|
$r3$.ɵɵelementAttribute(0, "class", $r3$.ɵɵbind("banana"));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -854,7 +854,7 @@ describe('compiler compliance: styling', () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const result = compile(files, angularFiles);
|
const result = compile(files, angularFiles);
|
||||||
expect(result.source).not.toContain('elementStyling');
|
expect(result.source).not.toContain('styling');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -885,14 +885,14 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap($ctx$.myStyleExp);
|
$r3$.ɵɵstyleMap($ctx$.myStyleExp);
|
||||||
$r3$.ɵɵelementClassMap($ctx$.myClassExp);
|
$r3$.ɵɵclassMap($ctx$.myClassExp);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -927,16 +927,16 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵpipe(1, "stylePipe");
|
$r3$.ɵɵpipe(1, "stylePipe");
|
||||||
$r3$.ɵɵpipe(2, "classPipe");
|
$r3$.ɵɵpipe(2, "classPipe");
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp));
|
$r3$.ɵɵstyleMap($r3$.ɵɵpipeBind1(1, 0, $ctx$.myStyleExp));
|
||||||
$r3$.ɵɵelementClassMap($r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp));
|
$r3$.ɵɵclassMap($r3$.ɵɵpipeBind1(2, 2, $ctx$.myClassExp));
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -982,7 +982,7 @@ describe('compiler compliance: styling', () => {
|
||||||
template: function MyComponent_Template(rf, $ctx$) {
|
template: function MyComponent_Template(rf, $ctx$) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵpipe(1, "pipe");
|
$r3$.ɵɵpipe(1, "pipe");
|
||||||
$r3$.ɵɵpipe(2, "pipe");
|
$r3$.ɵɵpipe(2, "pipe");
|
||||||
$r3$.ɵɵpipe(3, "pipe");
|
$r3$.ɵɵpipe(3, "pipe");
|
||||||
|
|
@ -992,12 +992,12 @@ describe('compiler compliance: styling', () => {
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap($r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
|
$r3$.ɵɵstyleMap($r3$.ɵɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
|
||||||
$r3$.ɵɵelementClassMap($e2_styling$);
|
$r3$.ɵɵclassMap($e2_styling$);
|
||||||
$r3$.ɵɵelementStyleProp(0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000));
|
$r3$.ɵɵstyleProp(0, $r3$.ɵɵpipeBind2(2, 4, $ctx$.barExp, 3000));
|
||||||
$r3$.ɵɵelementStyleProp(1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
|
$r3$.ɵɵstyleProp(1, $r3$.ɵɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
|
||||||
$r3$.ɵɵelementClassProp(0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
|
$r3$.ɵɵclassProp(0, $r3$.ɵɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵselect(5);
|
$r3$.ɵɵselect(5);
|
||||||
$r3$.ɵɵtextBinding(5, $r3$.ɵɵinterpolation1(" ", $ctx$.item, ""));
|
$r3$.ɵɵtextBinding(5, $r3$.ɵɵinterpolation1(" ", $ctx$.item, ""));
|
||||||
}
|
}
|
||||||
|
|
@ -1042,17 +1042,17 @@ describe('compiler compliance: styling', () => {
|
||||||
…
|
…
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleProp(0, $ctx$.w1);
|
$r3$.ɵɵstyleProp(0, $ctx$.w1);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵselect(1);
|
$r3$.ɵɵselect(1);
|
||||||
$r3$.ɵɵelementStyleProp(0, $ctx$.h1);
|
$r3$.ɵɵstyleProp(0, $ctx$.h1);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵselect(2);
|
$r3$.ɵɵselect(2);
|
||||||
$r3$.ɵɵelementClassProp(0, $ctx$.a1);
|
$r3$.ɵɵclassProp(0, $ctx$.a1);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
$r3$.ɵɵselect(3);
|
$r3$.ɵɵselect(3);
|
||||||
$r3$.ɵɵelementClassProp(0, $ctx$.r1);
|
$r3$.ɵɵclassProp(0, $ctx$.r1);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -1105,14 +1105,14 @@ describe('compiler compliance: styling', () => {
|
||||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementHostAttrs($e0_attrs$);
|
$r3$.ɵɵelementHostAttrs($e0_attrs$);
|
||||||
$r3$.ɵɵelementStyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling($e0_classBindings$, $e0_styleBindings$, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementStyleMap(ctx.myStyle);
|
$r3$.ɵɵstyleMap(ctx.myStyle);
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClass);
|
$r3$.ɵɵclassMap(ctx.myClass);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myColorProp);
|
$r3$.ɵɵstyleProp(0, ctx.myColorProp);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
|
$r3$.ɵɵclassProp(0, ctx.myFooClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
consts: 0,
|
consts: 0,
|
||||||
|
|
@ -1166,16 +1166,16 @@ describe('compiler compliance: styling', () => {
|
||||||
…
|
…
|
||||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementStyleMap(ctx.myStyle);
|
$r3$.ɵɵstyleMap(ctx.myStyle);
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClasses);
|
$r3$.ɵɵclassMap(ctx.myClasses);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myHeightProp, "pt");
|
$r3$.ɵɵstyleProp(0, ctx.myHeightProp, "pt");
|
||||||
$r3$.ɵɵelementStyleProp(1, ctx.myWidthProp);
|
$r3$.ɵɵstyleProp(1, ctx.myWidthProp);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
|
$r3$.ɵɵclassProp(0, ctx.myBarClass);
|
||||||
$r3$.ɵɵelementClassProp(1, ctx.myFooClass);
|
$r3$.ɵɵclassProp(1, ctx.myFooClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
consts: 0,
|
consts: 0,
|
||||||
|
|
@ -1230,16 +1230,16 @@ describe('compiler compliance: styling', () => {
|
||||||
function MyComponent_Template(rf, ctx) {
|
function MyComponent_Template(rf, ctx) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStart(0, "div");
|
$r3$.ɵɵelementStart(0, "div");
|
||||||
$r3$.ɵɵelementStyling(_c2, _c3, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(_c2, _c3, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
$r3$.ɵɵelementEnd();
|
$r3$.ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵselect(0);
|
$r3$.ɵɵselect(0);
|
||||||
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
|
$r3$.ɵɵstyleMap(ctx.myStyleExp);
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClassExp);
|
$r3$.ɵɵclassMap(ctx.myClassExp);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myHeightExp, null, true);
|
$r3$.ɵɵstyleProp(0, ctx.myHeightExp, null, true);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myBarClassExp, true);
|
$r3$.ɵɵclassProp(0, ctx.myBarClassExp, true);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
`;
|
`;
|
||||||
|
|
@ -1250,14 +1250,14 @@ describe('compiler compliance: styling', () => {
|
||||||
…
|
…
|
||||||
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
hostBindings: function MyComponent_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(_c0, _c1, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementStyleMap(ctx.myStyleExp);
|
$r3$.ɵɵstyleMap(ctx.myStyleExp);
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClassExp);
|
$r3$.ɵɵclassMap(ctx.myClassExp);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myWidthExp, null, true);
|
$r3$.ɵɵstyleProp(0, ctx.myWidthExp, null, true);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myFooClassExp, true);
|
$r3$.ɵɵclassProp(0, ctx.myFooClassExp, true);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
`;
|
`;
|
||||||
|
|
@ -1319,33 +1319,33 @@ describe('compiler compliance: styling', () => {
|
||||||
…
|
…
|
||||||
function ClassDirective_HostBindings(rf, ctx, elIndex) {
|
function ClassDirective_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStyling();
|
$r3$.ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClassMap);
|
$r3$.ɵɵclassMap(ctx.myClassMap);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
…
|
…
|
||||||
function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStyling($widthDir_classes$, $widthDir_styles$);
|
$r3$.ɵɵstyling($widthDir_classes$, $widthDir_styles$);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
|
$r3$.ɵɵstyleProp(0, ctx.myWidth);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
|
$r3$.ɵɵclassProp(0, ctx.myFooClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
…
|
…
|
||||||
function HeightDirective_HostBindings(rf, ctx, elIndex) {
|
function HeightDirective_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵelementStyling($heightDir_classes$, $heightDir_styles$);
|
$r3$.ɵɵstyling($heightDir_classes$, $heightDir_styles$);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myHeight);
|
$r3$.ɵɵstyleProp(0, ctx.myHeight);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myBarClass);
|
$r3$.ɵɵclassProp(0, ctx.myBarClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
…
|
…
|
||||||
|
|
@ -1401,14 +1401,14 @@ describe('compiler compliance: styling', () => {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵallocHostVars(2);
|
$r3$.ɵɵallocHostVars(2);
|
||||||
$r3$.ɵɵelementHostAttrs($_c0$);
|
$r3$.ɵɵelementHostAttrs($_c0$);
|
||||||
$r3$.ɵɵelementStyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
$r3$.ɵɵstyling(null, null, $r3$.ɵɵdefaultStyleSanitizer);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵproperty("id", ctx.id, null, true);
|
$r3$.ɵɵproperty("id", ctx.id, null, true);
|
||||||
$r3$.ɵɵproperty("title", ctx.title, null, true);
|
$r3$.ɵɵproperty("title", ctx.title, null, true);
|
||||||
$r3$.ɵɵelementStyleMap(ctx.myStyle);
|
$r3$.ɵɵstyleMap(ctx.myStyle);
|
||||||
$r3$.ɵɵelementClassMap(ctx.myClass);
|
$r3$.ɵɵclassMap(ctx.myClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
@ -1448,14 +1448,14 @@ describe('compiler compliance: styling', () => {
|
||||||
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
hostBindings: function WidthDirective_HostBindings(rf, ctx, elIndex) {
|
||||||
if (rf & 1) {
|
if (rf & 1) {
|
||||||
$r3$.ɵɵallocHostVars(2);
|
$r3$.ɵɵallocHostVars(2);
|
||||||
$r3$.ɵɵelementStyling($_c0$, $_c1$);
|
$r3$.ɵɵstyling($_c0$, $_c1$);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
$r3$.ɵɵproperty("id", ctx.id, null, true);
|
$r3$.ɵɵproperty("id", ctx.id, null, true);
|
||||||
$r3$.ɵɵproperty("title", ctx.title, null, true);
|
$r3$.ɵɵproperty("title", ctx.title, null, true);
|
||||||
$r3$.ɵɵelementStyleProp(0, ctx.myWidth);
|
$r3$.ɵɵstyleProp(0, ctx.myWidth);
|
||||||
$r3$.ɵɵelementClassProp(0, ctx.myFooClass);
|
$r3$.ɵɵclassProp(0, ctx.myFooClass);
|
||||||
$r3$.ɵɵelementStylingApply();
|
$r3$.ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1777,13 +1777,13 @@ describe('ngtsc behavioral tests', () => {
|
||||||
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
|
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); });
|
||||||
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody);
|
i0.\u0275\u0275listener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.\u0275\u0275resolveBody);
|
||||||
i0.\u0275\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
|
i0.\u0275\u0275listener("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
|
||||||
i0.\u0275\u0275elementStyling(_c0);
|
i0.\u0275\u0275styling(_c0);
|
||||||
}
|
}
|
||||||
if (rf & 2) {
|
if (rf & 2) {
|
||||||
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
|
i0.\u0275\u0275elementAttribute(elIndex, "hello", i0.\u0275\u0275bind(ctx.foo));
|
||||||
i0.\u0275\u0275property("prop", ctx.bar, null, true);
|
i0.\u0275\u0275property("prop", ctx.bar, null, true);
|
||||||
i0.\u0275\u0275elementClassProp(0, ctx.someClass);
|
i0.\u0275\u0275classProp(0, ctx.someClass);
|
||||||
i0.\u0275\u0275elementStylingApply();
|
i0.\u0275\u0275stylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ export class Identifiers {
|
||||||
|
|
||||||
static elementAttribute: o.ExternalReference = {name: 'ɵɵelementAttribute', moduleName: CORE};
|
static elementAttribute: o.ExternalReference = {name: 'ɵɵelementAttribute', moduleName: CORE};
|
||||||
|
|
||||||
static elementClassProp: o.ExternalReference = {name: 'ɵɵelementClassProp', moduleName: CORE};
|
static classProp: o.ExternalReference = {name: 'ɵɵclassProp', moduleName: CORE};
|
||||||
|
|
||||||
static elementContainerStart:
|
static elementContainerStart:
|
||||||
o.ExternalReference = {name: 'ɵɵelementContainerStart', moduleName: CORE};
|
o.ExternalReference = {name: 'ɵɵelementContainerStart', moduleName: CORE};
|
||||||
|
|
@ -49,16 +49,15 @@ export class Identifiers {
|
||||||
static elementContainerEnd:
|
static elementContainerEnd:
|
||||||
o.ExternalReference = {name: 'ɵɵelementContainerEnd', moduleName: CORE};
|
o.ExternalReference = {name: 'ɵɵelementContainerEnd', moduleName: CORE};
|
||||||
|
|
||||||
static elementStyling: o.ExternalReference = {name: 'ɵɵelementStyling', moduleName: CORE};
|
static styling: o.ExternalReference = {name: 'ɵɵstyling', moduleName: CORE};
|
||||||
|
|
||||||
static elementStyleMap: o.ExternalReference = {name: 'ɵɵelementStyleMap', moduleName: CORE};
|
static styleMap: o.ExternalReference = {name: 'ɵɵstyleMap', moduleName: CORE};
|
||||||
|
|
||||||
static elementClassMap: o.ExternalReference = {name: 'ɵɵelementClassMap', moduleName: CORE};
|
static classMap: o.ExternalReference = {name: 'ɵɵclassMap', moduleName: CORE};
|
||||||
|
|
||||||
static elementStyleProp: o.ExternalReference = {name: 'ɵɵelementStyleProp', moduleName: CORE};
|
static styleProp: o.ExternalReference = {name: 'ɵɵstyleProp', moduleName: CORE};
|
||||||
|
|
||||||
static elementStylingApply:
|
static stylingApply: o.ExternalReference = {name: 'ɵɵstylingApply', moduleName: CORE};
|
||||||
o.ExternalReference = {name: 'ɵɵelementStylingApply', moduleName: CORE};
|
|
||||||
|
|
||||||
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
|
static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -715,12 +715,10 @@ function createHostBindingsFunction(
|
||||||
// MUST be registered on a given element within the component/directive
|
// MUST be registered on a given element within the component/directive
|
||||||
// templateFn/hostBindingsFn functions. The instruction below will figure out
|
// templateFn/hostBindingsFn functions. The instruction below will figure out
|
||||||
// what all the bindings are and then generate the statements required to register
|
// what all the bindings are and then generate the statements required to register
|
||||||
// those bindings to the element via `elementStyling`.
|
// those bindings to the element via `styling`.
|
||||||
const elementStylingInstruction =
|
const stylingInstruction = styleBuilder.buildStylingInstruction(null, constantPool);
|
||||||
styleBuilder.buildElementStylingInstruction(null, constantPool);
|
if (stylingInstruction) {
|
||||||
if (elementStylingInstruction) {
|
createStatements.push(createStylingStmt(stylingInstruction, bindingContext, bindingFn));
|
||||||
createStatements.push(
|
|
||||||
createStylingStmt(elementStylingInstruction, bindingContext, bindingFn));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// finally each binding that was registered in the statement above will need to be added to
|
// finally each binding that was registered in the statement above will need to be added to
|
||||||
|
|
|
||||||
|
|
@ -58,14 +58,14 @@ interface BoundStylingEntry {
|
||||||
* order which these must be generated is as follows:
|
* order which these must be generated is as follows:
|
||||||
*
|
*
|
||||||
* if (createMode) {
|
* if (createMode) {
|
||||||
* elementStyling(...)
|
* styling(...)
|
||||||
* }
|
* }
|
||||||
* if (updateMode) {
|
* if (updateMode) {
|
||||||
* elementStyleMap(...)
|
* styleMap(...)
|
||||||
* elementClassMap(...)
|
* classMap(...)
|
||||||
* elementStyleProp(...)
|
* styleProp(...)
|
||||||
* elementClassProp(...)
|
* classProp(...)
|
||||||
* elementStylingApp(...)
|
* stylingApp(...)
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* The creation/update methods within the builder class produce these instructions.
|
* The creation/update methods within the builder class produce these instructions.
|
||||||
|
|
@ -277,18 +277,18 @@ export class StylingBuilder {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds an instruction with all the expressions and parameters for `elementStyling`.
|
* Builds an instruction with all the expressions and parameters for `styling`.
|
||||||
*
|
*
|
||||||
* The instruction generation code below is used for producing the AOT statement code which is
|
* The instruction generation code below is used for producing the AOT statement code which is
|
||||||
* responsible for registering style/class bindings to an element.
|
* responsible for registering style/class bindings to an element.
|
||||||
*/
|
*/
|
||||||
buildElementStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool):
|
buildStylingInstruction(sourceSpan: ParseSourceSpan|null, constantPool: ConstantPool): Instruction
|
||||||
Instruction|null {
|
|null {
|
||||||
if (this.hasBindings) {
|
if (this.hasBindings) {
|
||||||
return {
|
return {
|
||||||
sourceSpan,
|
sourceSpan,
|
||||||
allocateBindingSlots: 0,
|
allocateBindingSlots: 0,
|
||||||
reference: R3.elementStyling,
|
reference: R3.styling,
|
||||||
buildParams: () => {
|
buildParams: () => {
|
||||||
// a string array of every style-based binding
|
// a string array of every style-based binding
|
||||||
const styleBindingProps =
|
const styleBindingProps =
|
||||||
|
|
@ -303,8 +303,8 @@ export class StylingBuilder {
|
||||||
// (otherwise a shorter amount of params will be filled). The code below helps
|
// (otherwise a shorter amount of params will be filled). The code below helps
|
||||||
// determine how many params are required in the expression code.
|
// determine how many params are required in the expression code.
|
||||||
//
|
//
|
||||||
// min params => elementStyling()
|
// min params => styling()
|
||||||
// max params => elementStyling(classBindings, styleBindings, sanitizer)
|
// max params => styling(classBindings, styleBindings, sanitizer)
|
||||||
//
|
//
|
||||||
const params: o.Expression[] = [];
|
const params: o.Expression[] = [];
|
||||||
let expectedNumberOfArgs = 0;
|
let expectedNumberOfArgs = 0;
|
||||||
|
|
@ -335,12 +335,12 @@ export class StylingBuilder {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds an instruction with all the expressions and parameters for `elementClassMap`.
|
* Builds an instruction with all the expressions and parameters for `classMap`.
|
||||||
*
|
*
|
||||||
* The instruction data will contain all expressions for `elementClassMap` to function
|
* The instruction data will contain all expressions for `classMap` to function
|
||||||
* which includes the `[class]` expression params.
|
* which includes the `[class]` expression params.
|
||||||
*/
|
*/
|
||||||
buildElementClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
|
buildClassMapInstruction(valueConverter: ValueConverter): Instruction|null {
|
||||||
if (this._classMapInput) {
|
if (this._classMapInput) {
|
||||||
return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
|
return this._buildMapBasedInstruction(valueConverter, true, this._classMapInput);
|
||||||
}
|
}
|
||||||
|
|
@ -348,12 +348,12 @@ export class StylingBuilder {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds an instruction with all the expressions and parameters for `elementStyleMap`.
|
* Builds an instruction with all the expressions and parameters for `styleMap`.
|
||||||
*
|
*
|
||||||
* The instruction data will contain all expressions for `elementStyleMap` to function
|
* The instruction data will contain all expressions for `styleMap` to function
|
||||||
* which includes the `[style]` expression params.
|
* which includes the `[style]` expression params.
|
||||||
*/
|
*/
|
||||||
buildElementStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
|
buildStyleMapInstruction(valueConverter: ValueConverter): Instruction|null {
|
||||||
if (this._styleMapInput) {
|
if (this._styleMapInput) {
|
||||||
return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
|
return this._buildMapBasedInstruction(valueConverter, false, this._styleMapInput);
|
||||||
}
|
}
|
||||||
|
|
@ -372,7 +372,7 @@ export class StylingBuilder {
|
||||||
totalBindingSlotsRequired += mapValue.expressions.length;
|
totalBindingSlotsRequired += mapValue.expressions.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
const reference = isClassBased ? R3.elementClassMap : R3.elementStyleMap;
|
const reference = isClassBased ? R3.classMap : R3.styleMap;
|
||||||
return {
|
return {
|
||||||
sourceSpan: stylingInput.sourceSpan,
|
sourceSpan: stylingInput.sourceSpan,
|
||||||
reference,
|
reference,
|
||||||
|
|
@ -393,8 +393,8 @@ export class StylingBuilder {
|
||||||
sourceSpan: input.sourceSpan,
|
sourceSpan: input.sourceSpan,
|
||||||
allocateBindingSlots: totalBindingSlotsRequired, reference,
|
allocateBindingSlots: totalBindingSlotsRequired, reference,
|
||||||
buildParams: (convertFn: (value: any) => o.Expression) => {
|
buildParams: (convertFn: (value: any) => o.Expression) => {
|
||||||
// min params => elementStylingProp(elmIndex, bindingIndex, value)
|
// min params => stylingProp(elmIndex, bindingIndex, value)
|
||||||
// max params => elementStylingProp(elmIndex, bindingIndex, value, overrideFlag)
|
// max params => stylingProp(elmIndex, bindingIndex, value, overrideFlag)
|
||||||
const params: o.Expression[] = [];
|
const params: o.Expression[] = [];
|
||||||
params.push(o.literal(bindingIndex));
|
params.push(o.literal(bindingIndex));
|
||||||
params.push(convertFn(value));
|
params.push(convertFn(value));
|
||||||
|
|
@ -420,7 +420,7 @@ export class StylingBuilder {
|
||||||
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
|
private _buildClassInputs(valueConverter: ValueConverter): Instruction[] {
|
||||||
if (this._singleClassInputs) {
|
if (this._singleClassInputs) {
|
||||||
return this._buildSingleInputs(
|
return this._buildSingleInputs(
|
||||||
R3.elementClassProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
|
R3.classProp, this._singleClassInputs, this._classesIndex, false, valueConverter);
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
@ -428,7 +428,7 @@ export class StylingBuilder {
|
||||||
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
|
private _buildStyleInputs(valueConverter: ValueConverter): Instruction[] {
|
||||||
if (this._singleStyleInputs) {
|
if (this._singleStyleInputs) {
|
||||||
return this._buildSingleInputs(
|
return this._buildSingleInputs(
|
||||||
R3.elementStyleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
|
R3.styleProp, this._singleStyleInputs, this._stylesIndex, true, valueConverter);
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
@ -436,7 +436,7 @@ export class StylingBuilder {
|
||||||
private _buildApplyFn(): Instruction {
|
private _buildApplyFn(): Instruction {
|
||||||
return {
|
return {
|
||||||
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
|
sourceSpan: this._lastStylingInput ? this._lastStylingInput.sourceSpan : null,
|
||||||
reference: R3.elementStylingApply,
|
reference: R3.stylingApply,
|
||||||
allocateBindingSlots: 0,
|
allocateBindingSlots: 0,
|
||||||
buildParams: () => { return []; }
|
buildParams: () => { return []; }
|
||||||
};
|
};
|
||||||
|
|
@ -449,11 +449,11 @@ export class StylingBuilder {
|
||||||
buildUpdateLevelInstructions(valueConverter: ValueConverter) {
|
buildUpdateLevelInstructions(valueConverter: ValueConverter) {
|
||||||
const instructions: Instruction[] = [];
|
const instructions: Instruction[] = [];
|
||||||
if (this.hasBindings) {
|
if (this.hasBindings) {
|
||||||
const styleMapInstruction = this.buildElementStyleMapInstruction(valueConverter);
|
const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
|
||||||
if (styleMapInstruction) {
|
if (styleMapInstruction) {
|
||||||
instructions.push(styleMapInstruction);
|
instructions.push(styleMapInstruction);
|
||||||
}
|
}
|
||||||
const classMapInstruction = this.buildElementClassMapInstruction(valueConverter);
|
const classMapInstruction = this.buildClassMapInstruction(valueConverter);
|
||||||
if (classMapInstruction) {
|
if (classMapInstruction) {
|
||||||
instructions.push(classMapInstruction);
|
instructions.push(classMapInstruction);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -660,15 +660,14 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
||||||
}
|
}
|
||||||
|
|
||||||
// The style bindings code is placed into two distinct blocks within the template function AOT
|
// The style bindings code is placed into two distinct blocks within the template function AOT
|
||||||
// code: creation and update. The creation code contains the `elementStyling` instructions
|
// code: creation and update. The creation code contains the `styling` instructions
|
||||||
// which will apply the collected binding values to the element. `elementStyling` is
|
// which will apply the collected binding values to the element. `styling` is
|
||||||
// designed to run inside of `elementStart` and `elementEnd`. The update instructions
|
// designed to run inside of `elementStart` and `elementEnd`. The update instructions
|
||||||
// (things like `elementStyleProp`, `elementClassProp`, etc..) are applied later on in this
|
// (things like `styleProp`, `classProp`, etc..) are applied later on in this
|
||||||
// file
|
// file
|
||||||
this.processStylingInstruction(
|
this.processStylingInstruction(
|
||||||
elementIndex, implicit,
|
elementIndex, implicit,
|
||||||
stylingBuilder.buildElementStylingInstruction(element.sourceSpan, this.constantPool),
|
stylingBuilder.buildStylingInstruction(element.sourceSpan, this.constantPool), true);
|
||||||
true);
|
|
||||||
|
|
||||||
// Generate Listeners (outputs)
|
// Generate Listeners (outputs)
|
||||||
element.outputs.forEach((outputAst: t.BoundEvent) => {
|
element.outputs.forEach((outputAst: t.BoundEvent) => {
|
||||||
|
|
@ -685,8 +684,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
||||||
}
|
}
|
||||||
|
|
||||||
// the code here will collect all update-level styling instructions and add them to the
|
// the code here will collect all update-level styling instructions and add them to the
|
||||||
// update block of the template function AOT code. Instructions like `elementStyleProp`,
|
// update block of the template function AOT code. Instructions like `styleProp`,
|
||||||
// `elementStyleMap`, `elementClassMap`, `elementClassProp` and `elementStylingApply`
|
// `styleMap`, `classMap`, `classProp` and `stylingApply`
|
||||||
// are all generated and assigned in the code below.
|
// are all generated and assigned in the code below.
|
||||||
const stylingInstructions = stylingBuilder.buildUpdateLevelInstructions(this._valueConverter);
|
const stylingInstructions = stylingBuilder.buildUpdateLevelInstructions(this._valueConverter);
|
||||||
const limit = stylingInstructions.length - 1;
|
const limit = stylingInstructions.length - 1;
|
||||||
|
|
@ -772,7 +771,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
|
||||||
let instruction: any;
|
let instruction: any;
|
||||||
|
|
||||||
if (inputType === BindingType.Class) {
|
if (inputType === BindingType.Class) {
|
||||||
instruction = R3.elementClassProp;
|
instruction = R3.classProp;
|
||||||
} else {
|
} else {
|
||||||
instruction = R3.elementAttribute;
|
instruction = R3.elementAttribute;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -110,12 +110,12 @@ export {
|
||||||
ɵɵelementAttribute,
|
ɵɵelementAttribute,
|
||||||
ɵɵelementContainerStart,
|
ɵɵelementContainerStart,
|
||||||
ɵɵelementContainerEnd,
|
ɵɵelementContainerEnd,
|
||||||
ɵɵelementStyling,
|
ɵɵstyling,
|
||||||
ɵɵelementStyleMap,
|
ɵɵstyleMap,
|
||||||
ɵɵelementClassMap,
|
ɵɵclassMap,
|
||||||
ɵɵelementStyleProp,
|
ɵɵstyleProp,
|
||||||
ɵɵelementStylingApply,
|
ɵɵstylingApply,
|
||||||
ɵɵelementClassProp,
|
ɵɵclassProp,
|
||||||
ɵɵelementHostAttrs,
|
ɵɵelementHostAttrs,
|
||||||
|
|
||||||
ɵɵselect,
|
ɵɵselect,
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,8 @@ export {
|
||||||
tick,
|
tick,
|
||||||
ɵɵallocHostVars,
|
ɵɵallocHostVars,
|
||||||
ɵɵbind,
|
ɵɵbind,
|
||||||
|
ɵɵclassMap,
|
||||||
|
ɵɵclassProp,
|
||||||
ɵɵcomponentHostSyntheticListener,
|
ɵɵcomponentHostSyntheticListener,
|
||||||
ɵɵcomponentHostSyntheticProperty,
|
ɵɵcomponentHostSyntheticProperty,
|
||||||
|
|
||||||
|
|
@ -34,8 +36,6 @@ export {
|
||||||
|
|
||||||
ɵɵelement,
|
ɵɵelement,
|
||||||
ɵɵelementAttribute,
|
ɵɵelementAttribute,
|
||||||
ɵɵelementClassMap,
|
|
||||||
ɵɵelementClassProp,
|
|
||||||
ɵɵelementContainerEnd,
|
ɵɵelementContainerEnd,
|
||||||
|
|
||||||
ɵɵelementContainerStart,
|
ɵɵelementContainerStart,
|
||||||
|
|
@ -44,10 +44,6 @@ export {
|
||||||
ɵɵelementHostAttrs,
|
ɵɵelementHostAttrs,
|
||||||
ɵɵelementProperty,
|
ɵɵelementProperty,
|
||||||
ɵɵelementStart,
|
ɵɵelementStart,
|
||||||
ɵɵelementStyleMap,
|
|
||||||
ɵɵelementStyleProp,
|
|
||||||
ɵɵelementStyling,
|
|
||||||
ɵɵelementStylingApply,
|
|
||||||
ɵɵembeddedViewEnd,
|
ɵɵembeddedViewEnd,
|
||||||
|
|
||||||
ɵɵembeddedViewStart,
|
ɵɵembeddedViewStart,
|
||||||
|
|
@ -91,6 +87,10 @@ export {
|
||||||
ɵɵreference,
|
ɵɵreference,
|
||||||
|
|
||||||
ɵɵselect,
|
ɵɵselect,
|
||||||
|
ɵɵstyleMap,
|
||||||
|
ɵɵstyleProp,
|
||||||
|
ɵɵstyling,
|
||||||
|
ɵɵstylingApply,
|
||||||
ɵɵtemplate,
|
ɵɵtemplate,
|
||||||
|
|
||||||
ɵɵtext,
|
ɵɵtext,
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import {TNode, TNodeType} from '../interfaces/node';
|
||||||
import {PlayerFactory} from '../interfaces/player';
|
import {PlayerFactory} from '../interfaces/player';
|
||||||
import {FLAGS, HEADER_OFFSET, LView, LViewFlags, RENDERER, RootContextFlags} from '../interfaces/view';
|
import {FLAGS, HEADER_OFFSET, LView, LViewFlags, RENDERER, RootContextFlags} from '../interfaces/view';
|
||||||
import {getActiveDirectiveId, getActiveDirectiveSuperClassDepth, getLView, getPreviousOrParentTNode, getSelectedIndex} from '../state';
|
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 {ParamsOf, enqueueHostInstruction, registerHostDirective} from '../styling/host_instructions_queue';
|
||||||
import {BoundPlayerFactory} from '../styling/player_factory';
|
import {BoundPlayerFactory} from '../styling/player_factory';
|
||||||
import {DEFAULT_TEMPLATE_DIRECTIVE_INDEX} from '../styling/shared';
|
import {DEFAULT_TEMPLATE_DIRECTIVE_INDEX} from '../styling/shared';
|
||||||
|
|
@ -33,12 +33,12 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||||
* The instructions present in this file are:
|
* The instructions present in this file are:
|
||||||
*
|
*
|
||||||
* Template level styling instructions:
|
* Template level styling instructions:
|
||||||
* - elementStyling
|
* - styling
|
||||||
* - elementStyleMap
|
* - styleMap
|
||||||
* - elementClassMap
|
* - classMap
|
||||||
* - elementStyleProp
|
* - styleProp
|
||||||
* - elementClassProp
|
* - classProp
|
||||||
* - elementStylingApply
|
* - stylingApply
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -50,10 +50,10 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||||
* values to an element).
|
* values to an element).
|
||||||
*
|
*
|
||||||
* @param classBindingNames An array containing bindable class names.
|
* @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`).
|
* this array (i.e. `['foo', 'bar']` means `foo=0` and `bar=1`).
|
||||||
* @param styleBindingNames An array containing bindable style properties.
|
* @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`).
|
* 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
|
* @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
|
||||||
* style values that are applied to the element (during rendering).
|
* style values that are applied to the element (during rendering).
|
||||||
|
|
@ -63,7 +63,7 @@ import {scheduleTick, setInputsForProperty} from './shared';
|
||||||
*
|
*
|
||||||
* @codeGenApi
|
* @codeGenApi
|
||||||
*/
|
*/
|
||||||
export function ɵɵelementStyling(
|
export function ɵɵstyling(
|
||||||
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
|
classBindingNames?: string[] | null, styleBindingNames?: string[] | null,
|
||||||
styleSanitizer?: StyleSanitizeFn | null): void {
|
styleSanitizer?: StyleSanitizeFn | null): void {
|
||||||
const tNode = getPreviousOrParentTNode();
|
const tNode = getPreviousOrParentTNode();
|
||||||
|
|
@ -81,7 +81,7 @@ export function ɵɵelementStyling(
|
||||||
|
|
||||||
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
|
const fns = tNode.onElementCreationFns = tNode.onElementCreationFns || [];
|
||||||
fns.push(() => {
|
fns.push(() => {
|
||||||
initElementStyling(
|
initstyling(
|
||||||
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
|
tNode, classBindingNames, styleBindingNames, styleSanitizer, directiveStylingIndex);
|
||||||
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
|
registerHostDirective(tNode.stylingTemplate !, directiveStylingIndex);
|
||||||
});
|
});
|
||||||
|
|
@ -92,13 +92,13 @@ export function ɵɵelementStyling(
|
||||||
// components) then they will be applied at the end of the `elementEnd`
|
// components) then they will be applied at the end of the `elementEnd`
|
||||||
// instruction (because directives are created first before styling is
|
// instruction (because directives are created first before styling is
|
||||||
// executed for a new element).
|
// executed for a new element).
|
||||||
initElementStyling(
|
initstyling(
|
||||||
tNode, classBindingNames, styleBindingNames, styleSanitizer,
|
tNode, classBindingNames, styleBindingNames, styleSanitizer,
|
||||||
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
|
DEFAULT_TEMPLATE_DIRECTIVE_INDEX);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initElementStyling(
|
function initstyling(
|
||||||
tNode: TNode, classBindingNames: string[] | null | undefined,
|
tNode: TNode, classBindingNames: string[] | null | undefined,
|
||||||
styleBindingNames: string[] | null | undefined,
|
styleBindingNames: string[] | null | undefined,
|
||||||
styleSanitizer: StyleSanitizeFn | null | undefined, directiveStylingIndex: number): void {
|
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
|
* 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
|
* (or assigned a different value depending if there are any styles placed
|
||||||
* on the element with `elementStyleMap` or any static styles that are
|
* on the element with `styleMap` or any static styles that are
|
||||||
* present from when the element was created with `elementStyling`).
|
* 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
|
* @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
|
* 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 value New value to write (falsy to remove).
|
||||||
* @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
|
* @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
|
* Note that when a suffix is provided then the underlying sanitizer will
|
||||||
|
|
@ -133,7 +133,7 @@ function initElementStyling(
|
||||||
*
|
*
|
||||||
* @codeGenApi
|
* @codeGenApi
|
||||||
*/
|
*/
|
||||||
export function ɵɵelementStyleProp(
|
export function ɵɵstyleProp(
|
||||||
styleIndex: number, value: string | number | String | PlayerFactory | null,
|
styleIndex: number, value: string | number | String | PlayerFactory | null,
|
||||||
suffix?: string | null, forceOverride?: boolean): void {
|
suffix?: string | null, forceOverride?: boolean): void {
|
||||||
const index = getSelectedIndex();
|
const index = getSelectedIndex();
|
||||||
|
|
@ -141,11 +141,11 @@ export function ɵɵelementStyleProp(
|
||||||
const stylingContext = getStylingContext(index, getLView());
|
const stylingContext = getStylingContext(index, getLView());
|
||||||
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
||||||
if (directiveStylingIndex) {
|
if (directiveStylingIndex) {
|
||||||
const args: ParamsOf<typeof updateElementStyleProp> =
|
const args: ParamsOf<typeof updatestyleProp> =
|
||||||
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
|
[stylingContext, styleIndex, valueToAdd, directiveStylingIndex, forceOverride];
|
||||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementStyleProp, args);
|
enqueueHostInstruction(stylingContext, directiveStylingIndex, updatestyleProp, args);
|
||||||
} else {
|
} else {
|
||||||
updateElementStyleProp(
|
updatestyleProp(
|
||||||
stylingContext, styleIndex, valueToAdd, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
|
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,
|
* This instruction is meant to handle the `[class.foo]="exp"` case and,
|
||||||
* therefore, the class binding itself must already be allocated using
|
* 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
|
* @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
|
* 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).
|
* function is).
|
||||||
* @param value A true/false value which will turn the class on or off.
|
* @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
|
* @param forceOverride Whether or not this value will be applied regardless
|
||||||
|
|
@ -190,7 +190,7 @@ function resolveStylePropValue(
|
||||||
*
|
*
|
||||||
* @codeGenApi
|
* @codeGenApi
|
||||||
*/
|
*/
|
||||||
export function ɵɵelementClassProp(
|
export function ɵɵclassProp(
|
||||||
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
|
classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void {
|
||||||
const index = getSelectedIndex();
|
const index = getSelectedIndex();
|
||||||
const input = (value instanceof BoundPlayerFactory) ?
|
const input = (value instanceof BoundPlayerFactory) ?
|
||||||
|
|
@ -199,11 +199,11 @@ export function ɵɵelementClassProp(
|
||||||
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
const directiveStylingIndex = getActiveDirectiveStylingIndex();
|
||||||
const stylingContext = getStylingContext(index, getLView());
|
const stylingContext = getStylingContext(index, getLView());
|
||||||
if (directiveStylingIndex) {
|
if (directiveStylingIndex) {
|
||||||
const args: ParamsOf<typeof updateElementClassProp> =
|
const args: ParamsOf<typeof updateclassProp> =
|
||||||
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
|
[stylingContext, classIndex, input, directiveStylingIndex, forceOverride];
|
||||||
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateElementClassProp, args);
|
enqueueHostInstruction(stylingContext, directiveStylingIndex, updateclassProp, args);
|
||||||
} else {
|
} else {
|
||||||
updateElementClassProp(
|
updateclassProp(
|
||||||
stylingContext, classIndex, input, DEFAULT_TEMPLATE_DIRECTIVE_INDEX, forceOverride);
|
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.
|
* 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
|
* 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.
|
* 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.
|
* @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
|
* 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
|
* @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 index = getSelectedIndex();
|
||||||
const lView = getLView();
|
const lView = getLView();
|
||||||
const stylingContext = getStylingContext(index, lView);
|
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.
|
* 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
|
* 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.
|
* 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
|
* Note that this will the provided classMap value to the host element if this function is called
|
||||||
* within a host binding.
|
* within a host binding.
|
||||||
*
|
*
|
||||||
|
|
@ -278,8 +278,7 @@ export function ɵɵelementStyleMap(styles: {[styleName: string]: any} | NO_CHAN
|
||||||
*
|
*
|
||||||
* @codeGenApi
|
* @codeGenApi
|
||||||
*/
|
*/
|
||||||
export function ɵɵelementClassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null):
|
export function ɵɵclassMap(classes: {[styleName: string]: any} | NO_CHANGE | string | null): void {
|
||||||
void {
|
|
||||||
const index = getSelectedIndex();
|
const index = getSelectedIndex();
|
||||||
const lView = getLView();
|
const lView = getLView();
|
||||||
const stylingContext = getStylingContext(index, lView);
|
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.
|
* Apply all style and class binding values to the element.
|
||||||
*
|
*
|
||||||
* This instruction is meant to be run after `elementStyleMap`, `elementClassMap`,
|
* This instruction is meant to be run after `styleMap`, `classMap`,
|
||||||
* `elementStyleProp` or `elementClassProp` instructions have been run and will
|
* `styleProp` or `classProp` instructions have been run and will
|
||||||
* only apply styling to the element if any styling bindings have been updated.
|
* only apply styling to the element if any styling bindings have been updated.
|
||||||
*
|
*
|
||||||
* @codeGenApi
|
* @codeGenApi
|
||||||
*/
|
*/
|
||||||
export function ɵɵelementStylingApply(): void {
|
export function ɵɵstylingApply(): void {
|
||||||
const index = getSelectedIndex();
|
const index = getSelectedIndex();
|
||||||
const directiveStylingIndex =
|
const directiveStylingIndex =
|
||||||
getActiveDirectiveStylingIndex() || DEFAULT_TEMPLATE_DIRECTIVE_INDEX;
|
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.
|
* 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:
|
* 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).
|
* instance).
|
||||||
*
|
*
|
||||||
* When this instruction is called it will populate the styling context with the provided style
|
* 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.
|
* values are and how they work.
|
||||||
*
|
*
|
||||||
* Each time a binding property is updated (whether it be through a single
|
* Each time a binding property is updated (whether it be through a single
|
||||||
* property instruction like `elementStyleProp`, `elementClassProp`,
|
* property instruction like `styleProp`, `classProp`,
|
||||||
* `elementStyleMap` or `elementClassMap`) then the values in the context will be updated as
|
* `styleMap` or `classMap`) then the values in the context will be updated as
|
||||||
* well.
|
* well.
|
||||||
*
|
*
|
||||||
* If for example `[style.width]` updates to `555px` then its value will be reflected
|
* 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
|
* 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
|
* 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
|
* 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
|
* function will now know not to rerun itself again if called again unless new style/class values
|
||||||
* have changed.
|
* have changed.
|
||||||
|
|
@ -158,12 +158,12 @@ import {LView} from './view';
|
||||||
* Each of the following instructions supports accepting a directive instance as an input parameter:
|
* Each of the following instructions supports accepting a directive instance as an input parameter:
|
||||||
*
|
*
|
||||||
* - `elementHostAttrs`
|
* - `elementHostAttrs`
|
||||||
* - `elementStyling`
|
* - `styling`
|
||||||
* - `elementStyleProp`
|
* - `styleProp`
|
||||||
* - `elementClassProp`
|
* - `classProp`
|
||||||
* - `elementStyleMap`
|
* - `styleMap`
|
||||||
* - `elementClassMap`
|
* - `classMap`
|
||||||
* - `elementStylingApply`
|
* - `stylingApply`
|
||||||
*
|
*
|
||||||
* Each time a directive value is passed in, it will be converted into an index by examining the
|
* 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
|
* directive registry (which lives in the context configuration area). The index is then used
|
||||||
|
|
@ -257,7 +257,7 @@ import {LView} from './view';
|
||||||
*
|
*
|
||||||
* ## Rendering
|
* ## Rendering
|
||||||
* The rendering mechanism (when the styling data is applied on screen) occurs via the
|
* 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
|
* 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
|
* flagged as dirty (either because they are new, updated or have been removed via multi or
|
||||||
* single bindings).
|
* single bindings).
|
||||||
|
|
@ -293,19 +293,19 @@ export interface StylingContext extends
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A numeric value representing the class index offset value. Whenever a single class is
|
* 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.
|
* need to take into account any style values that exist in the context.
|
||||||
*/
|
*/
|
||||||
[StylingIndex.SinglePropOffsetPositions]: SinglePropOffsetValues;
|
[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.
|
* So that the algorithm can exit early incase the value has not changed.
|
||||||
*/
|
*/
|
||||||
[StylingIndex.CachedMultiClasses]: any|MapBasedOffsetValues;
|
[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.
|
* So that the algorithm can exit early incase the value has not changed.
|
||||||
*/
|
*/
|
||||||
[StylingIndex.CachedMultiStyles]: any|MapBasedOffsetValues;
|
[StylingIndex.CachedMultiStyles]: any|MapBasedOffsetValues;
|
||||||
|
|
@ -319,7 +319,7 @@ export interface StylingContext extends
|
||||||
* standard angular instructions, they are not designed to immediately apply
|
* standard angular instructions, they are not designed to immediately apply
|
||||||
* their values to the styling context when executed. What happens instead is
|
* their values to the styling context when executed. What happens instead is
|
||||||
* a queue is constructed and each instruction is populated into the queue.
|
* 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
|
* `hostStylingApply`), the queue is flushed and the values are rendered onto
|
||||||
* the host element.
|
* the host element.
|
||||||
*/
|
*/
|
||||||
|
|
@ -337,7 +337,7 @@ export interface StylingContext extends
|
||||||
* the styling is applied).
|
* the styling is applied).
|
||||||
*
|
*
|
||||||
* This queue is used when any `hostStyling` instructions are executed from the `hostBindings`
|
* 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).
|
* 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
|
* 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`).
|
* inside of `renderStyling`).
|
||||||
*
|
*
|
||||||
* Right now each directive's hostBindings function, as well the template function, both
|
* 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
|
* 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`
|
* 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
|
* 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,
|
'ɵɵloadContentQuery': r3.ɵɵloadContentQuery,
|
||||||
'ɵɵreference': r3.ɵɵreference,
|
'ɵɵreference': r3.ɵɵreference,
|
||||||
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
|
'ɵɵelementHostAttrs': r3.ɵɵelementHostAttrs,
|
||||||
'ɵɵelementClassMap': r3.ɵɵelementClassMap,
|
'ɵɵclassMap': r3.ɵɵclassMap,
|
||||||
'ɵɵelementStyling': r3.ɵɵelementStyling,
|
'ɵɵstyling': r3.ɵɵstyling,
|
||||||
'ɵɵelementStyleMap': r3.ɵɵelementStyleMap,
|
'ɵɵstyleMap': r3.ɵɵstyleMap,
|
||||||
'ɵɵelementStyleProp': r3.ɵɵelementStyleProp,
|
'ɵɵstyleProp': r3.ɵɵstyleProp,
|
||||||
'ɵɵelementStylingApply': r3.ɵɵelementStylingApply,
|
'ɵɵstylingApply': r3.ɵɵstylingApply,
|
||||||
'ɵɵelementClassProp': r3.ɵɵelementClassProp,
|
'ɵɵclassProp': r3.ɵɵclassProp,
|
||||||
'ɵɵselect': r3.ɵɵselect,
|
'ɵɵselect': r3.ɵɵselect,
|
||||||
'ɵɵtemplate': r3.ɵɵtemplate,
|
'ɵɵtemplate': r3.ɵɵtemplate,
|
||||||
'ɵɵtext': r3.ɵɵtext,
|
'ɵɵtext': r3.ɵɵtext,
|
||||||
|
|
|
||||||
|
|
@ -235,8 +235,8 @@ export function updateContextWithBindings(
|
||||||
|
|
||||||
// because we're inserting more bindings into the context, this means that the
|
// because we're inserting more bindings into the context, this means that the
|
||||||
// binding values need to be referenced the singlePropOffsetValues array so that
|
// binding values need to be referenced the singlePropOffsetValues array so that
|
||||||
// the template/directive can easily find them inside of the `elementStyleProp`
|
// the template/directive can easily find them inside of the `styleProp`
|
||||||
// and the `elementClassProp` functions without iterating through the entire context.
|
// 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
|
// 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
|
// 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
|
// 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`
|
* every style declaration such as `<div style="color: red">` would result `StyleContext`
|
||||||
* which would create unnecessary memory pressure.
|
* 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
|
* @param viewData The view to search for the styling context
|
||||||
*/
|
*/
|
||||||
export function getStylingContextFromLView(index: number, viewData: LView): StylingContext {
|
export function getStylingContextFromLView(index: number, viewData: LView): StylingContext {
|
||||||
|
|
|
||||||
|
|
@ -920,9 +920,6 @@
|
||||||
{
|
{
|
||||||
"name": "incrementActiveDirectiveId"
|
"name": "incrementActiveDirectiveId"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "initElementStyling"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "initNodeFlags"
|
"name": "initNodeFlags"
|
||||||
},
|
},
|
||||||
|
|
@ -932,6 +929,9 @@
|
||||||
{
|
{
|
||||||
"name": "initializeTNodeInputs"
|
"name": "initializeTNodeInputs"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "initstyling"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "injectElementRef"
|
"name": "injectElementRef"
|
||||||
},
|
},
|
||||||
|
|
@ -1364,6 +1364,9 @@
|
||||||
{
|
{
|
||||||
"name": "ɵɵbind"
|
"name": "ɵɵbind"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "ɵɵclassProp"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "ɵɵdefineComponent"
|
"name": "ɵɵdefineComponent"
|
||||||
},
|
},
|
||||||
|
|
@ -1376,21 +1379,12 @@
|
||||||
{
|
{
|
||||||
"name": "ɵɵdirectiveInject"
|
"name": "ɵɵdirectiveInject"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "ɵɵelementClassProp"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "ɵɵelementEnd"
|
"name": "ɵɵelementEnd"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "ɵɵelementStart"
|
"name": "ɵɵelementStart"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "ɵɵelementStyling"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "ɵɵelementStylingApply"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "ɵɵgetCurrentView"
|
"name": "ɵɵgetCurrentView"
|
||||||
},
|
},
|
||||||
|
|
@ -1421,6 +1415,12 @@
|
||||||
{
|
{
|
||||||
"name": "ɵɵselect"
|
"name": "ɵɵselect"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "ɵɵstyling"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ɵɵstylingApply"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "ɵɵtemplate"
|
"name": "ɵɵtemplate"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
import {StaticInjector} from '../../src/di/injector';
|
import {StaticInjector} from '../../src/di/injector';
|
||||||
import {createInjector} from '../../src/di/r3_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 {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 {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
|
||||||
|
|
||||||
import {NgIf} from './common_with_def';
|
import {NgIf} from './common_with_def';
|
||||||
|
|
@ -557,7 +557,7 @@ describe('discovery utils deprecated', () => {
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵ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 {ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV} from '@angular/core/src/render3/instructions/all';
|
||||||
|
|
||||||
import {ɵɵdefineComponent} from '../../src/render3/definition';
|
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 {AttributeMarker} from '../../src/render3/interfaces/node';
|
||||||
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
|
import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
|
||||||
import {ɵɵdefaultStyleSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
|
import {ɵɵdefaultStyleSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
|
||||||
|
|
@ -23,7 +23,7 @@ import {ComponentFixture, TemplateFixture} from './render_util';
|
||||||
describe('instructions', () => {
|
describe('instructions', () => {
|
||||||
function createAnchor() {
|
function createAnchor() {
|
||||||
ɵɵelementStart(0, 'a');
|
ɵɵelementStart(0, 'a');
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,7 +39,7 @@ describe('instructions', () => {
|
||||||
attrs.push(AttributeMarker.Styles, ...initialStyles);
|
attrs.push(AttributeMarker.Styles, ...initialStyles);
|
||||||
}
|
}
|
||||||
ɵɵelementStart(0, 'div', attrs);
|
ɵɵelementStart(0, 'div', attrs);
|
||||||
ɵɵelementStyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
|
ɵɵstyling(classBindingNames || null, styleBindingNames || null, styleSanitizer);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1010,23 +1010,23 @@ describe('instructions', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('elementStyleProp', () => {
|
describe('styleProp', () => {
|
||||||
it('should automatically sanitize unless a bypass operation is applied', () => {
|
it('should automatically sanitize unless a bypass operation is applied', () => {
|
||||||
const t = new TemplateFixture(() => {
|
const t = new TemplateFixture(() => {
|
||||||
return createDiv(null, null, null, ['background-image'], ɵɵdefaultStyleSanitizer);
|
return createDiv(null, null, null, ['background-image'], ɵɵdefaultStyleSanitizer);
|
||||||
}, () => {}, 1);
|
}, () => {}, 1);
|
||||||
t.update(() => {
|
t.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, 'url("http://server")');
|
ɵɵstyleProp(0, 'url("http://server")');
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
// nothing is set because sanitizer suppresses it.
|
// nothing is set because sanitizer suppresses it.
|
||||||
expect(t.html).toEqual('<div></div>');
|
expect(t.html).toEqual('<div></div>');
|
||||||
|
|
||||||
t.update(() => {
|
t.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
|
ɵɵstyleProp(0, bypassSanitizationTrustStyle('url("http://server2")'));
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
|
expect((t.hostElement.firstChild as HTMLElement).style.getPropertyValue('background-image'))
|
||||||
.toEqual('url("http://server2")');
|
.toEqual('url("http://server2")');
|
||||||
|
|
@ -1041,8 +1041,8 @@ describe('instructions', () => {
|
||||||
|
|
||||||
t.update(() => {
|
t.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
|
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(sanitizerInterceptor.lastValue !).toEqual('apple');
|
expect(sanitizerInterceptor.lastValue !).toEqual('apple');
|
||||||
|
|
@ -1050,17 +1050,17 @@ describe('instructions', () => {
|
||||||
|
|
||||||
t.update(() => {
|
t.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, bypassSanitizationTrustStyle('apple'));
|
ɵɵstyleProp(0, bypassSanitizationTrustStyle('apple'));
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
expect(sanitizerInterceptor.lastValue).toEqual(null);
|
expect(sanitizerInterceptor.lastValue).toEqual(null);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('elementStyleMap', () => {
|
describe('styleMap', () => {
|
||||||
function createDivWithStyle() {
|
function createDivWithStyle() {
|
||||||
ɵɵelementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
|
ɵɵelementStart(0, 'div', [AttributeMarker.Styles, 'height', '10px']);
|
||||||
ɵɵelementStyling([], ['height']);
|
ɵɵstyling([], ['height']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1068,8 +1068,8 @@ describe('instructions', () => {
|
||||||
const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1);
|
const fixture = new TemplateFixture(createDivWithStyle, () => {}, 1);
|
||||||
fixture.update(() => {
|
fixture.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap({'background-color': 'red'});
|
ɵɵstyleMap({'background-color': 'red'});
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
|
expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
|
||||||
});
|
});
|
||||||
|
|
@ -1084,7 +1084,7 @@ describe('instructions', () => {
|
||||||
|
|
||||||
fixture.update(() => {
|
fixture.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap({
|
ɵɵstyleMap({
|
||||||
'background-image': 'background-image',
|
'background-image': 'background-image',
|
||||||
'background': 'background',
|
'background': 'background',
|
||||||
'border-image': 'border-image',
|
'border-image': 'border-image',
|
||||||
|
|
@ -1093,7 +1093,7 @@ describe('instructions', () => {
|
||||||
'filter': 'filter',
|
'filter': 'filter',
|
||||||
'width': 'width'
|
'width': 'width'
|
||||||
});
|
});
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
|
|
||||||
const props = detectedValues.sort();
|
const props = detectedValues.sort();
|
||||||
|
|
@ -1106,7 +1106,7 @@ describe('instructions', () => {
|
||||||
describe('elementClass', () => {
|
describe('elementClass', () => {
|
||||||
function createDivWithStyling() {
|
function createDivWithStyling() {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1114,8 +1114,8 @@ describe('instructions', () => {
|
||||||
const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1);
|
const fixture = new TemplateFixture(createDivWithStyling, () => {}, 1);
|
||||||
fixture.update(() => {
|
fixture.update(() => {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassMap('multiple classes');
|
ɵɵclassMap('multiple classes');
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
});
|
});
|
||||||
expect(fixture.html).toEqual('<div class="multiple classes"></div>');
|
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 {RendererType2} from '../../src/render/api';
|
||||||
import {getLContext} from '../../src/render3/context_discovery';
|
import {getLContext} from '../../src/render3/context_discovery';
|
||||||
import {AttributeMarker, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementClassMap, ɵɵelementStyleMap, ɵɵtemplateRefExtractor} from '../../src/render3/index';
|
import {AttributeMarker, ɵɵclassMap, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵstyleMap, ɵɵ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 {ɵɵ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 {MONKEY_PATCH_KEY_NAME} from '../../src/render3/interfaces/context';
|
||||||
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
||||||
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
|
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) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'span');
|
ɵɵelementStart(0, 'span');
|
||||||
ɵɵelementStyling(null, ['border-color']);
|
ɵɵstyling(null, ['border-color']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.color);
|
ɵɵstyleProp(0, ctx.color);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
|
|
@ -1449,13 +1449,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'span');
|
ɵɵelementStart(0, 'span');
|
||||||
ɵɵelementStyling(null, ['font-size']);
|
ɵɵstyling(null, ['font-size']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.time, 'px');
|
ɵɵstyleProp(0, ctx.time, 'px');
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
|
|
@ -1484,13 +1484,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'span');
|
ɵɵelementStart(0, 'span');
|
||||||
ɵɵelementStyling(['active']);
|
ɵɵstyling(['active']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassProp(0, ctx.class);
|
ɵɵclassProp(0, ctx.class);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
|
|
@ -1526,13 +1526,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'span', [AttributeMarker.Classes, 'existing']);
|
ɵɵelementStart(0, 'span', [AttributeMarker.Classes, 'existing']);
|
||||||
ɵɵelementStyling(['existing', 'active']);
|
ɵɵstyling(['existing', 'active']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassProp(1, ctx.class);
|
ɵɵclassProp(1, ctx.class);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
||||||
|
|
@ -1559,13 +1559,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'my-comp');
|
ɵɵelementStart(0, 'my-comp');
|
||||||
ɵɵelementStyling(['active']);
|
ɵɵstyling(['active']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassProp(0, ctx.class);
|
ɵɵclassProp(0, ctx.class);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [MyComp]);
|
}, 1, 0, [MyComp]);
|
||||||
|
|
||||||
|
|
@ -1622,14 +1622,14 @@ describe('render3 integration test', () => {
|
||||||
ɵɵtemplate(
|
ɵɵtemplate(
|
||||||
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], ɵɵtemplateRefExtractor);
|
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], ɵɵtemplateRefExtractor);
|
||||||
ɵɵelementStart(2, 'structural-comp');
|
ɵɵelementStart(2, 'structural-comp');
|
||||||
ɵɵelementStyling(['active']);
|
ɵɵstyling(['active']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
const foo = ɵɵreference(1) as any;
|
const foo = ɵɵreference(1) as any;
|
||||||
ɵɵselect(2);
|
ɵɵselect(2);
|
||||||
ɵɵelementClassProp(0, ctx.class);
|
ɵɵclassProp(0, ctx.class);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
ɵɵelementProperty(2, 'tmp', ɵɵbind(foo));
|
ɵɵelementProperty(2, 'tmp', ɵɵbind(foo));
|
||||||
}
|
}
|
||||||
}, 3, 1, [StructuralComp]);
|
}, 3, 1, [StructuralComp]);
|
||||||
|
|
@ -1687,12 +1687,12 @@ describe('render3 integration test', () => {
|
||||||
ɵɵelementStart(
|
ɵɵelementStart(
|
||||||
0, 'div',
|
0, 'div',
|
||||||
['DirWithClass', '', AttributeMarker.Classes, 'apple', 'orange', 'banana']);
|
['DirWithClass', '', AttributeMarker.Classes, 'apple', 'orange', 'banana']);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [DirWithClassDirective]);
|
}, 1, 0, [DirWithClassDirective]);
|
||||||
|
|
||||||
|
|
@ -1710,12 +1710,12 @@ describe('render3 integration test', () => {
|
||||||
ɵɵelementStart(0, 'div', [
|
ɵɵelementStart(0, 'div', [
|
||||||
'DirWithStyle', '', AttributeMarker.Styles, 'width', '100px', 'height', '200px'
|
'DirWithStyle', '', AttributeMarker.Styles, 'width', '100px', 'height', '200px'
|
||||||
]);
|
]);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [DirWithStyleDirective]);
|
}, 1, 0, [DirWithStyleDirective]);
|
||||||
|
|
||||||
|
|
@ -1731,13 +1731,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div', ['DirWithClass']);
|
ɵɵelementStart(0, 'div', ['DirWithClass']);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassMap('cucumber grape');
|
ɵɵclassMap('cucumber grape');
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [DirWithClassDirective]);
|
}, 1, 0, [DirWithClassDirective]);
|
||||||
|
|
||||||
|
|
@ -1753,13 +1753,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div', ['DirWithStyle']);
|
ɵɵelementStart(0, 'div', ['DirWithStyle']);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap({width: '200px', height: '500px'});
|
ɵɵstyleMap({width: '200px', height: '500px'});
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [DirWithStyleDirective]);
|
}, 1, 0, [DirWithStyleDirective]);
|
||||||
|
|
||||||
|
|
@ -1830,13 +1830,13 @@ describe('render3 integration test', () => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementHostAttrs(
|
ɵɵelementHostAttrs(
|
||||||
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
|
[AttributeMarker.Classes, 'def', AttributeMarker.Styles, 'width', '555px']);
|
||||||
ɵɵelementStyling(['xyz'], ['width', 'height']);
|
ɵɵstyling(['xyz'], ['width', 'height']);
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleProp(0, ctx.width);
|
ɵɵstyleProp(0, ctx.width);
|
||||||
ɵɵelementStyleProp(1, ctx.height);
|
ɵɵstyleProp(1, ctx.height);
|
||||||
ɵɵelementClassProp(0, ctx.activateXYZClass);
|
ɵɵclassProp(0, ctx.activateXYZClass);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1903,11 +1903,11 @@ describe('render3 integration test', () => {
|
||||||
factory: () => dir1Instance = new Dir1WithStyle(),
|
factory: () => dir1Instance = new Dir1WithStyle(),
|
||||||
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
|
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyle, elementIndex: number) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStyling(null, ['width']);
|
ɵɵstyling(null, ['width']);
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleProp(0, ctx.width);
|
ɵɵstyleProp(0, ctx.width);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1928,11 +1928,11 @@ describe('render3 integration test', () => {
|
||||||
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
|
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyle, elementIndex: number) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
||||||
ɵɵelementStyling(null, ['width']);
|
ɵɵstyling(null, ['width']);
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleProp(0, ctx.width);
|
ɵɵstyleProp(0, ctx.width);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1946,12 +1946,12 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelement(0, 'div', ['Dir1WithStyle', '', 'Dir2WithStyle', '']);
|
ɵɵelement(0, 'div', ['Dir1WithStyle', '', 'Dir2WithStyle', '']);
|
||||||
ɵɵelementStyling(null, ['width']);
|
ɵɵstyling(null, ['width']);
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.width);
|
ɵɵstyleProp(0, ctx.width);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [Dir1WithStyle, Dir2WithStyle]);
|
}, 1, 0, [Dir1WithStyle, Dir2WithStyle]);
|
||||||
|
|
||||||
|
|
@ -2001,12 +2001,12 @@ describe('render3 integration test', () => {
|
||||||
factory: () => dir1Instance = new Dir1WithStyling(),
|
factory: () => dir1Instance = new Dir1WithStyling(),
|
||||||
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
|
hostBindings: function(rf: RenderFlags, ctx: Dir1WithStyling, elementIndex: number) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleMap(ctx.stylesExp);
|
ɵɵstyleMap(ctx.stylesExp);
|
||||||
ɵɵelementClassMap(ctx.classesExp);
|
ɵɵclassMap(ctx.classesExp);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -2029,11 +2029,11 @@ describe('render3 integration test', () => {
|
||||||
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
|
hostBindings: function(rf: RenderFlags, ctx: Dir2WithStyling, elementIndex: number) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
ɵɵelementHostAttrs([AttributeMarker.Styles, 'width', '111px']);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleMap(ctx.stylesExp);
|
ɵɵstyleMap(ctx.stylesExp);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -2048,13 +2048,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelement(0, 'div', ['Dir1WithStyling', '', 'Dir2WithStyling', '']);
|
ɵɵelement(0, 'div', ['Dir1WithStyling', '', 'Dir2WithStyling', '']);
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap(ctx.stylesExp);
|
ɵɵstyleMap(ctx.stylesExp);
|
||||||
ɵɵelementClassMap(ctx.classesExp);
|
ɵɵclassMap(ctx.classesExp);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 0, [Dir1WithStyling, Dir2WithStyling]);
|
}, 1, 0, [Dir1WithStyling, Dir2WithStyling]);
|
||||||
|
|
||||||
|
|
@ -2126,13 +2126,13 @@ describe('render3 integration test', () => {
|
||||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling();
|
ɵɵstyling();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementClassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
|
ɵɵclassMap(ɵɵinterpolation2('-', ctx.name, '-', ctx.age, '-'));
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}, 1, 2);
|
}, 1, 2);
|
||||||
|
|
||||||
|
|
@ -2627,12 +2627,12 @@ describe('element discovery', () => {
|
||||||
template: (rf: RenderFlags, ctx: StructuredComp) => {
|
template: (rf: RenderFlags, ctx: StructuredComp) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'section');
|
ɵɵelementStart(0, 'section');
|
||||||
ɵɵelementStyling(['class-foo']);
|
ɵɵstyling(['class-foo']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵ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 {createRootContext} from '../../../src/render3/component';
|
||||||
import {getLContext} from '../../../src/render3/context_discovery';
|
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 {RenderFlags} from '../../../src/render3/interfaces/definition';
|
||||||
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
|
import {AttributeMarker, TAttributes} from '../../../src/render3/interfaces/node';
|
||||||
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
|
import {BindingStore, BindingType, PlayState, Player, PlayerContext, PlayerFactory, PlayerHandler} from '../../../src/render3/interfaces/player';
|
||||||
|
|
@ -392,14 +392,14 @@ describe('style and class based bindings', () => {
|
||||||
'opacity',
|
'opacity',
|
||||||
'0.5',
|
'0.5',
|
||||||
]);
|
]);
|
||||||
ɵɵelementStyling(null, ['width']);
|
ɵɵstyling(null, ['width']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap(ctx.myStyles);
|
ɵɵstyleMap(ctx.myStyles);
|
||||||
ɵɵelementStyleProp(0, ctx.myWidth);
|
ɵɵstyleProp(0, ctx.myWidth);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -429,16 +429,16 @@ describe('style and class based bindings', () => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵnamespaceSVG();
|
ɵɵnamespaceSVG();
|
||||||
ɵɵelementStart(0, 'svg');
|
ɵɵelementStart(0, 'svg');
|
||||||
ɵɵelementStyling(null, ['width', 'height']);
|
ɵɵstyling(null, ['width', 'height']);
|
||||||
ɵɵelementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
|
ɵɵelementStart(1, 'circle', ['stroke', 'green', 'fill', 'yellow']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.diameter, 'px');
|
ɵɵstyleProp(0, ctx.diameter, 'px');
|
||||||
ɵɵelementStyleProp(1, ctx.diameter, 'px');
|
ɵɵstyleProp(1, ctx.diameter, 'px');
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -471,14 +471,14 @@ describe('style and class based bindings', () => {
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
template: (rf: RenderFlags, ctx: Comp) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling(null, ['borderWidth', 'border-color']);
|
ɵɵstyling(null, ['borderWidth', 'border-color']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.borderWidth);
|
ɵɵstyleProp(0, ctx.borderWidth);
|
||||||
ɵɵelementStyleProp(1, ctx.borderColor);
|
ɵɵstyleProp(1, ctx.borderColor);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3109,16 +3109,16 @@ describe('style and class based bindings', () => {
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
template: (rf: RenderFlags, ctx: Comp) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling(['foo'], ['width']);
|
ɵɵstyling(['foo'], ['width']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap(styleMapFactory);
|
ɵɵstyleMap(styleMapFactory);
|
||||||
ɵɵelementClassMap(classMapFactory);
|
ɵɵclassMap(classMapFactory);
|
||||||
ɵɵelementStyleProp(0, widthFactory);
|
ɵɵstyleProp(0, widthFactory);
|
||||||
ɵɵelementClassProp(0, fooFactory);
|
ɵɵclassProp(0, fooFactory);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3184,16 +3184,16 @@ describe('style and class based bindings', () => {
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
template: (rf: RenderFlags, ctx: Comp) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling(['foo'], ['width']);
|
ɵɵstyling(['foo'], ['width']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleMap(styleMapFactory);
|
ɵɵstyleMap(styleMapFactory);
|
||||||
ɵɵelementClassMap(classMapFactory);
|
ɵɵclassMap(classMapFactory);
|
||||||
ɵɵelementStyleProp(0, widthFactory);
|
ɵɵstyleProp(0, widthFactory);
|
||||||
ɵɵelementClassProp(0, fooFactory);
|
ɵɵclassProp(0, fooFactory);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3257,12 +3257,12 @@ describe('style and class based bindings', () => {
|
||||||
factory: () => new MyDir(),
|
factory: () => new MyDir(),
|
||||||
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
|
hostBindings: function(rf: RenderFlags, ctx: MyDir, elementIndex: number) {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStyling(['foo'], ['width']);
|
ɵɵstyling(['foo'], ['width']);
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵelementStyleProp(0, ctx.widthFactory);
|
ɵɵstyleProp(0, ctx.widthFactory);
|
||||||
ɵɵelementClassProp(0, ctx.fooFactory);
|
ɵɵclassProp(0, ctx.fooFactory);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -3282,14 +3282,14 @@ describe('style and class based bindings', () => {
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
template: (rf: RenderFlags, ctx: Comp) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div', ['my-dir', '']);
|
ɵɵelementStart(0, 'div', ['my-dir', '']);
|
||||||
ɵɵelementStyling(['foo'], ['width']);
|
ɵɵstyling(['foo'], ['width']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStyleProp(0, ctx.widthFactory);
|
ɵɵstyleProp(0, ctx.widthFactory);
|
||||||
ɵɵelementClassProp(0, ctx.fooFactory);
|
ɵɵclassProp(0, ctx.fooFactory);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import {QueryList} from '@angular/core';
|
||||||
import {RenderFlags} from '@angular/core/src/render3';
|
import {RenderFlags} from '@angular/core/src/render3';
|
||||||
|
|
||||||
import {getHostElement, ɵɵdefineComponent, ɵɵloadViewQuery, ɵɵviewQuery} from '../../../src/render3/index';
|
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 {PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player';
|
||||||
import {RElement} from '../../../src/render3/interfaces/renderer';
|
import {RElement} from '../../../src/render3/interfaces/renderer';
|
||||||
import {addPlayer, getPlayers} from '../../../src/render3/players';
|
import {addPlayer, getPlayers} from '../../../src/render3/players';
|
||||||
|
|
@ -258,12 +258,12 @@ class CompWithStyling {
|
||||||
template: (rf: RenderFlags, ctx: CompWithStyling) => {
|
template: (rf: RenderFlags, ctx: CompWithStyling) => {
|
||||||
if (rf & RenderFlags.Create) {
|
if (rf & RenderFlags.Create) {
|
||||||
ɵɵelementStart(0, 'div');
|
ɵɵelementStart(0, 'div');
|
||||||
ɵɵelementStyling(['fooClass']);
|
ɵɵstyling(['fooClass']);
|
||||||
ɵɵelementEnd();
|
ɵɵelementEnd();
|
||||||
}
|
}
|
||||||
if (rf & RenderFlags.Update) {
|
if (rf & RenderFlags.Update) {
|
||||||
ɵɵselect(0);
|
ɵɵselect(0);
|
||||||
ɵɵelementStylingApply();
|
ɵɵstylingApply();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -678,6 +678,12 @@ export interface ɵɵBaseDef<T> {
|
||||||
|
|
||||||
export declare function ɵɵbind<T>(value: T): T | NO_CHANGE;
|
export declare function ɵɵbind<T>(value: T): T | NO_CHANGE;
|
||||||
|
|
||||||
|
export declare function ɵɵclassMap(classes: {
|
||||||
|
[styleName: string]: any;
|
||||||
|
} | NO_CHANGE | string | null): void;
|
||||||
|
|
||||||
|
export declare function ɵɵclassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
|
||||||
|
|
||||||
export declare type ɵɵComponentDefWithMeta<T, Selector extends String, ExportAs extends string[], InputMap extends {
|
export declare type ɵɵComponentDefWithMeta<T, Selector extends String, ExportAs extends string[], InputMap extends {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
}, OutputMap extends {
|
}, OutputMap extends {
|
||||||
|
|
@ -795,12 +801,6 @@ export declare function ɵɵelement(index: number, name: string, attrs?: TAttrib
|
||||||
|
|
||||||
export declare function ɵɵelementAttribute(index: number, name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string): void;
|
export declare function ɵɵelementAttribute(index: number, name: string, value: any, sanitizer?: SanitizerFn | null, namespace?: string): void;
|
||||||
|
|
||||||
export declare function ɵɵelementClassMap(classes: {
|
|
||||||
[styleName: string]: any;
|
|
||||||
} | NO_CHANGE | string | null): void;
|
|
||||||
|
|
||||||
export declare function ɵɵelementClassProp(classIndex: number, value: boolean | PlayerFactory, forceOverride?: boolean): void;
|
|
||||||
|
|
||||||
export declare function ɵɵelementContainerEnd(): void;
|
export declare function ɵɵelementContainerEnd(): void;
|
||||||
|
|
||||||
export declare function ɵɵelementContainerStart(index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void;
|
export declare function ɵɵelementContainerStart(index: number, attrs?: TAttributes | null, localRefs?: string[] | null): void;
|
||||||
|
|
@ -813,16 +813,6 @@ export declare function ɵɵelementProperty<T>(index: number, propName: string,
|
||||||
|
|
||||||
export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void;
|
export declare function ɵɵelementStart(index: number, name: string, attrs?: TAttributes | null, localRefs?: string[] | null): void;
|
||||||
|
|
||||||
export declare function ɵɵelementStyleMap(styles: {
|
|
||||||
[styleName: string]: any;
|
|
||||||
} | NO_CHANGE | null): void;
|
|
||||||
|
|
||||||
export declare function ɵɵelementStyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
|
|
||||||
|
|
||||||
export declare function ɵɵelementStyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
|
|
||||||
|
|
||||||
export declare function ɵɵelementStylingApply(): void;
|
|
||||||
|
|
||||||
export declare function ɵɵembeddedViewEnd(): void;
|
export declare function ɵɵembeddedViewEnd(): void;
|
||||||
|
|
||||||
export declare function ɵɵembeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags;
|
export declare function ɵɵembeddedViewStart(viewBlockId: number, consts: number, vars: number): RenderFlags;
|
||||||
|
|
@ -1028,6 +1018,16 @@ export declare function ɵɵstaticContentQuery<T>(directiveIndex: number, predic
|
||||||
|
|
||||||
export declare function ɵɵstaticViewQuery<T>(predicate: Type<any> | string[], descend: boolean, read: any): void;
|
export declare function ɵɵstaticViewQuery<T>(predicate: Type<any> | string[], descend: boolean, read: any): void;
|
||||||
|
|
||||||
|
export declare function ɵɵstyleMap(styles: {
|
||||||
|
[styleName: string]: any;
|
||||||
|
} | NO_CHANGE | null): void;
|
||||||
|
|
||||||
|
export declare function ɵɵstyleProp(styleIndex: number, value: string | number | String | PlayerFactory | null, suffix?: string | null, forceOverride?: boolean): void;
|
||||||
|
|
||||||
|
export declare function ɵɵstyling(classBindingNames?: string[] | null, styleBindingNames?: string[] | null, styleSanitizer?: StyleSanitizeFn | null): void;
|
||||||
|
|
||||||
|
export declare function ɵɵstylingApply(): void;
|
||||||
|
|
||||||
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, consts: number, vars: number, tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null, localRefExtractor?: LocalRefExtractor): void;
|
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, consts: number, vars: number, tagName?: string | null, attrs?: TAttributes | null, localRefs?: string[] | null, localRefExtractor?: LocalRefExtractor): void;
|
||||||
|
|
||||||
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: LView): ViewEngine_TemplateRef<{}> | null;
|
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: LView): ViewEngine_TemplateRef<{}> | null;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue