parent
4b3f9ac739
commit
26f49151e7
@ -44,4 +44,6 @@ export function getAngularDevConfig<K, T>(): DevInfraConfig<K, T> {
|
|||||||
* Interface exressing the expected structure of the DevInfraConfig.
|
* Interface exressing the expected structure of the DevInfraConfig.
|
||||||
* Allows for providing a typing for a part of the config to read.
|
* Allows for providing a typing for a part of the config to read.
|
||||||
*/
|
*/
|
||||||
export interface DevInfraConfig<K, T> { [K: string]: T; }
|
export interface DevInfraConfig<K, T> {
|
||||||
|
[K: string]: T;
|
||||||
|
}
|
||||||
|
2
goldens/public-api/core/core.d.ts
vendored
2
goldens/public-api/core/core.d.ts
vendored
@ -1064,7 +1064,7 @@ export declare function ɵɵstyleSanitizer(sanitizer: StyleSanitizeFn | null): v
|
|||||||
|
|
||||||
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, decls: number, vars: number, tagName?: string | null, attrsIndex?: number | null, localRefsIndex?: number | null, localRefExtractor?: LocalRefExtractor): void;
|
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, decls: number, vars: number, tagName?: string | null, attrsIndex?: number | null, localRefsIndex?: number | null, localRefExtractor?: LocalRefExtractor): void;
|
||||||
|
|
||||||
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bp): TemplateRef<unknown> | null;
|
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bo): TemplateRef<unknown> | null;
|
||||||
|
|
||||||
export declare function ɵɵtext(index: number, value?: string): void;
|
export declare function ɵɵtext(index: number, value?: string): void;
|
||||||
|
|
||||||
|
@ -75,7 +75,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// BOOTSTRAP the app!
|
// BOOTSTRAP the app!
|
||||||
System.import('index').then(function(m: any) { m.main(); }, console.error.bind(console));
|
System.import('index').then(function(m: any) {
|
||||||
|
m.main();
|
||||||
|
}, console.error.bind(console));
|
||||||
}
|
}
|
||||||
|
|
||||||
function writeScriptTag(scriptUrl: string, onload?: string) {
|
function writeScriptTag(scriptUrl: string, onload?: string) {
|
||||||
|
@ -34,7 +34,6 @@ const UpdateWorker: Worker = {
|
|||||||
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
||||||
|
|
||||||
describe('change detection benchmark perf', () => {
|
describe('change detection benchmark perf', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
[UpdateWorker].forEach((worker) => {
|
[UpdateWorker].forEach((worker) => {
|
||||||
|
@ -35,7 +35,9 @@ export function init(moduleRef: NgModuleRef<TransplantedViewsModule>) {
|
|||||||
appRef.tick();
|
appRef.tick();
|
||||||
}
|
}
|
||||||
|
|
||||||
function detectChanges() { appRef.tick(); }
|
function detectChanges() {
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
}
|
}
|
||||||
|
@ -40,10 +40,14 @@ export class InsertionComponent {
|
|||||||
@Input() template !: TemplateRef<{}>;
|
@Input() template !: TemplateRef<{}>;
|
||||||
views: any[] = [];
|
views: any[] = [];
|
||||||
@Input()
|
@Input()
|
||||||
set viewCount(n: number) { this.views = n > 0 ? newArray<any>(n) : []; }
|
set viewCount(n: number) {
|
||||||
|
this.views = n > 0 ? newArray<any>(n) : [];
|
||||||
|
}
|
||||||
|
|
||||||
// use trackBy to ensure profile isn't affected by the cost to refresh ngFor.
|
// use trackBy to ensure profile isn't affected by the cost to refresh ngFor.
|
||||||
trackByIndex(index: number, item: any) { return index; }
|
trackByIndex(index: number, item: any) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -27,12 +27,16 @@ export class AppComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
create() { this.show = true; }
|
create() {
|
||||||
|
this.show = true;
|
||||||
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
this.msg = this.msg === 'hello' ? 'bye' : 'hello';
|
this.msg = this.msg === 'hello' ? 'bye' : 'hello';
|
||||||
this.list[0].text = this.msg;
|
this.list[0].text = this.msg;
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() { this.show = false; }
|
destroy() {
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@ import {$, browser} from 'protractor';
|
|||||||
import {runBenchmark} from '../../../e2e_util/perf_util';
|
import {runBenchmark} from '../../../e2e_util/perf_util';
|
||||||
|
|
||||||
describe('class bindings perf', () => {
|
describe('class bindings perf', () => {
|
||||||
|
|
||||||
it('should work for update', async () => {
|
it('should work for update', async () => {
|
||||||
browser.rootEl = '#root';
|
browser.rootEl = '#root';
|
||||||
await runBenchmark({
|
await runBenchmark({
|
||||||
@ -34,5 +33,4 @@ describe('class bindings perf', () => {
|
|||||||
work: () => $('#update').click()
|
work: () => $('#update').click()
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -31,23 +31,32 @@ import {BenchmarkableExpandingRowModule} from './benchmarkable_expanding_row_mod
|
|||||||
</benchmark-area>`,
|
</benchmark-area>`,
|
||||||
})
|
})
|
||||||
export class InitializationRoot implements AfterViewInit {
|
export class InitializationRoot implements AfterViewInit {
|
||||||
@ViewChild(BenchmarkableExpandingRow, {static: true})
|
@ViewChild(BenchmarkableExpandingRow, {static: true}) expandingRow!: BenchmarkableExpandingRow;
|
||||||
expandingRow !: BenchmarkableExpandingRow;
|
|
||||||
|
|
||||||
ngAfterViewInit() {}
|
ngAfterViewInit() {}
|
||||||
|
|
||||||
reset() { this.expandingRow.reset(); }
|
reset() {
|
||||||
|
this.expandingRow.reset();
|
||||||
init() { this.expandingRow.init(); }
|
|
||||||
|
|
||||||
async runAll() {
|
|
||||||
await execTimed('initialization_benchmark', async() => { await this.doInit(); });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async handleInitClick() { await this.doInit(); }
|
init() {
|
||||||
|
this.expandingRow.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
async runAll() {
|
||||||
|
await execTimed('initialization_benchmark', async () => {
|
||||||
|
await this.doInit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleInitClick() {
|
||||||
|
await this.doInit();
|
||||||
|
}
|
||||||
|
|
||||||
private async doInit() {
|
private async doInit() {
|
||||||
await execTimed('initial_load', async() => { this.expandingRow.init(); });
|
await execTimed('initial_load', async () => {
|
||||||
|
this.expandingRow.init();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,5 +83,9 @@ export async function execTimed(description: string, func: () => Promise<void>)
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function nextTick(delay = 1) {
|
export async function nextTick(delay = 1) {
|
||||||
return new Promise((res, rej) => { setTimeout(() => { res(); }, delay); });
|
return new Promise((res, rej) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
res();
|
||||||
|
}, delay);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,9 @@ import {Component, ErrorHandler, Injectable, NgModule} from '@angular/core';
|
|||||||
export class BenchmarkArea {
|
export class BenchmarkArea {
|
||||||
}
|
}
|
||||||
|
|
||||||
declare interface ExtendedWindow extends Window { benchmarkErrors?: string[]; }
|
declare interface ExtendedWindow extends Window {
|
||||||
|
benchmarkErrors?: string[];
|
||||||
|
}
|
||||||
const extendedWindow = window as ExtendedWindow;
|
const extendedWindow = window as ExtendedWindow;
|
||||||
|
|
||||||
@Injectable({providedIn: 'root'})
|
@Injectable({providedIn: 'root'})
|
||||||
|
@ -119,8 +119,7 @@ export class ExpandingRow {
|
|||||||
* to this element to compute the height. The height of cfc-expanding-row
|
* to this element to compute the height. The height of cfc-expanding-row
|
||||||
* is used in [cfcExpandingRowHost] directive for scroll adjustments.
|
* is used in [cfcExpandingRowHost] directive for scroll adjustments.
|
||||||
*/
|
*/
|
||||||
@ViewChild('expandingRowMainElement', {static: true})
|
@ViewChild('expandingRowMainElement', {static: true}) expandingRowMainElement!: ElementRef;
|
||||||
expandingRowMainElement !: ElementRef;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This @Output event emitter will be triggered when the user expands or
|
* This @Output event emitter will be triggered when the user expands or
|
||||||
@ -145,7 +144,9 @@ export class ExpandingRow {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** TS getter for isExpanded property. */
|
/** TS getter for isExpanded property. */
|
||||||
get isExpanded(): boolean { return this.isExpandedInternal; }
|
get isExpanded(): boolean {
|
||||||
|
return this.isExpandedInternal;
|
||||||
|
}
|
||||||
|
|
||||||
/** Triggered when isExpanded property changes. */
|
/** Triggered when isExpanded property changes. */
|
||||||
isExpandedChange = new EventEmitter<void>();
|
isExpandedChange = new EventEmitter<void>();
|
||||||
@ -164,7 +165,9 @@ export class ExpandingRow {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** TS getter for isFocused property. */
|
/** TS getter for isFocused property. */
|
||||||
get isFocused(): boolean { return this.isFocusedInternal; }
|
get isFocused(): boolean {
|
||||||
|
return this.isFocusedInternal;
|
||||||
|
}
|
||||||
|
|
||||||
/** The index of the row in the context of the entire collection. */
|
/** The index of the row in the context of the entire collection. */
|
||||||
set index(value: number) {
|
set index(value: number) {
|
||||||
@ -178,7 +181,9 @@ export class ExpandingRow {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** TS getter for index property. */
|
/** TS getter for index property. */
|
||||||
get index(): number { return this.indexInternal; }
|
get index(): number {
|
||||||
|
return this.indexInternal;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* We should probably rename this to summaryContentChild. Because technically
|
* We should probably rename this to summaryContentChild. Because technically
|
||||||
@ -233,7 +238,9 @@ export class ExpandingRow {
|
|||||||
* When user tabs into child cfc-expanding-row-summary component. This method
|
* When user tabs into child cfc-expanding-row-summary component. This method
|
||||||
* will make sure we focuse on this row, and blur on previously focused row.
|
* will make sure we focuse on this row, and blur on previously focused row.
|
||||||
*/
|
*/
|
||||||
handleSummaryFocus(): void { this.focus(); }
|
handleSummaryFocus(): void {
|
||||||
|
this.focus();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* cfc-expanding-row-details-caption component will call this function to
|
* cfc-expanding-row-details-caption component will call this function to
|
||||||
@ -256,7 +263,9 @@ export class ExpandingRow {
|
|||||||
* Gets the height of this component. This height is used in parent
|
* Gets the height of this component. This height is used in parent
|
||||||
* [cfcExpandingRowHost] directive to compute scroll adjustment.
|
* [cfcExpandingRowHost] directive to compute scroll adjustment.
|
||||||
*/
|
*/
|
||||||
getHeight(): number { return this.expandingRowMainElement.nativeElement.offsetHeight; }
|
getHeight(): number {
|
||||||
|
return this.expandingRowMainElement.nativeElement.offsetHeight;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expands this row. This will notify the host so that it can collapse
|
* Expands this row. This will notify the host so that it can collapse
|
||||||
@ -268,7 +277,9 @@ export class ExpandingRow {
|
|||||||
this.expandingRowHost.handleRowExpand(this);
|
this.expandingRowHost.handleRowExpand(this);
|
||||||
|
|
||||||
// setTimeout here makes sure we scroll this row into view after animation.
|
// setTimeout here makes sure we scroll this row into view after animation.
|
||||||
setTimeout(() => { this.expandingRowMainElement.nativeElement.focus(); });
|
setTimeout(() => {
|
||||||
|
this.expandingRowMainElement.nativeElement.focus();
|
||||||
|
});
|
||||||
|
|
||||||
this.onToggle.emit({rowId: this.rowId, isExpand: true});
|
this.onToggle.emit({rowId: this.rowId, isExpand: true});
|
||||||
}
|
}
|
||||||
@ -305,7 +316,9 @@ export class ExpandingRow {
|
|||||||
|
|
||||||
// Summary child is not present currently. We need to NG2 to update the
|
// Summary child is not present currently. We need to NG2 to update the
|
||||||
// template.
|
// template.
|
||||||
setTimeout(() => { this.summaryViewChild.focus(); });
|
setTimeout(() => {
|
||||||
|
this.summaryViewChild.focus();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -49,5 +49,7 @@ export class ExpandingRowDetailsCaption implements OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** When component is destroyed, unlisten to isExpanded. */
|
/** When component is destroyed, unlisten to isExpanded. */
|
||||||
ngOnDestroy(): void { this.onDestroy.next(); }
|
ngOnDestroy(): void {
|
||||||
|
this.onDestroy.next();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -35,10 +35,13 @@ export class ExpandingRowDetailsContent implements OnDestroy {
|
|||||||
* hide this component if the row is collapsed.
|
* hide this component if the row is collapsed.
|
||||||
*/
|
*/
|
||||||
constructor(@Host() public expandingRow: ExpandingRow, changeDetectorRef: ChangeDetectorRef) {
|
constructor(@Host() public expandingRow: ExpandingRow, changeDetectorRef: ChangeDetectorRef) {
|
||||||
this.isExpandedChangeSubscription =
|
this.isExpandedChangeSubscription = this.expandingRow.isExpandedChange.subscribe(() => {
|
||||||
this.expandingRow.isExpandedChange.subscribe(() => { changeDetectorRef.markForCheck(); });
|
changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Unsubscribe from changes in parent isExpanded property. */
|
/** Unsubscribe from changes in parent isExpanded property. */
|
||||||
ngOnDestroy(): void { this.isExpandedChangeSubscription.unsubscribe(); }
|
ngOnDestroy(): void {
|
||||||
|
this.isExpandedChangeSubscription.unsubscribe();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Output, QueryList, ViewChild, forwardRef} from '@angular/core';
|
import {AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Output, QueryList, ViewChild} from '@angular/core';
|
||||||
import {Subscription} from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
|
|
||||||
import {EXPANDING_ROW_HOST_INJECTION_TOKEN, ExpandingRow, ExpandingRowHostBase} from './expanding_row';
|
import {EXPANDING_ROW_HOST_INJECTION_TOKEN, ExpandingRow, ExpandingRowHostBase} from './expanding_row';
|
||||||
@ -48,8 +48,7 @@ type UpOrDown = 'up' | 'down';
|
|||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
providers: [{provide: EXPANDING_ROW_HOST_INJECTION_TOKEN, useExisting: ExpandingRowHost}],
|
providers: [{provide: EXPANDING_ROW_HOST_INJECTION_TOKEN, useExisting: ExpandingRowHost}],
|
||||||
})
|
})
|
||||||
export class ExpandingRowHost implements AfterViewInit,
|
export class ExpandingRowHost implements AfterViewInit, OnDestroy, ExpandingRowHostBase {
|
||||||
OnDestroy, ExpandingRowHostBase {
|
|
||||||
/**
|
/**
|
||||||
* An HTML selector (e.g. "body") for the scroll element. We need this to
|
* An HTML selector (e.g. "body") for the scroll element. We need this to
|
||||||
* make some scroll adjustments.
|
* make some scroll adjustments.
|
||||||
@ -74,8 +73,7 @@ export class ExpandingRowHost implements AfterViewInit,
|
|||||||
@ViewChild('lastFocusable', {static: true}) lastFocusableElement!: ElementRef;
|
@ViewChild('lastFocusable', {static: true}) lastFocusableElement!: ElementRef;
|
||||||
|
|
||||||
/** A reference to the first focusable element in list of expanding rows. */
|
/** A reference to the first focusable element in list of expanding rows. */
|
||||||
@ViewChild('firstFocusable', {static: true})
|
@ViewChild('firstFocusable', {static: true}) firstFocusableElement!: ElementRef;
|
||||||
firstFocusableElement !: ElementRef;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A reference to all child cfc-expanding-row elements. We will need for
|
* A reference to all child cfc-expanding-row elements. We will need for
|
||||||
@ -138,8 +136,9 @@ export class ExpandingRowHost implements AfterViewInit,
|
|||||||
|
|
||||||
clickRootElement.addEventListener('mouseup', this.handleRootMouseUpBound);
|
clickRootElement.addEventListener('mouseup', this.handleRootMouseUpBound);
|
||||||
|
|
||||||
this.rowChangeSubscription =
|
this.rowChangeSubscription = this.contentRows.changes.subscribe(() => {
|
||||||
this.contentRows.changes.subscribe(() => { this.recalcRowIndexes(); });
|
this.recalcRowIndexes();
|
||||||
|
});
|
||||||
this.recalcRowIndexes();
|
this.recalcRowIndexes();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -256,13 +255,17 @@ export class ExpandingRowHost implements AfterViewInit,
|
|||||||
* Function that is called by expanding row summary to focus on the last
|
* Function that is called by expanding row summary to focus on the last
|
||||||
* focusable element before the list of expanding rows.
|
* focusable element before the list of expanding rows.
|
||||||
*/
|
*/
|
||||||
focusOnPreviousFocusableElement(): void { this.lastFocusedRow = this.focusedRow; }
|
focusOnPreviousFocusableElement(): void {
|
||||||
|
this.lastFocusedRow = this.focusedRow;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function that is called by expanding row summary to focus on the next
|
* Function that is called by expanding row summary to focus on the next
|
||||||
* focusable element after the list of expanding rows.
|
* focusable element after the list of expanding rows.
|
||||||
*/
|
*/
|
||||||
focusOnNextFocusableElement(): void { this.lastFocusedRow = this.focusedRow; }
|
focusOnNextFocusableElement(): void {
|
||||||
|
this.lastFocusedRow = this.focusedRow;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles keydown event on the host. We are just concerned with up,
|
* Handles keydown event on the host. We are just concerned with up,
|
||||||
@ -275,7 +278,8 @@ export class ExpandingRowHost implements AfterViewInit,
|
|||||||
* - Enter: Expands the focused row.
|
* - Enter: Expands the focused row.
|
||||||
*/
|
*/
|
||||||
@HostListener('keydown', ['$event'])
|
@HostListener('keydown', ['$event'])
|
||||||
handleKeyDown(event: KeyboardEvent) {}
|
handleKeyDown(event: KeyboardEvent) {
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Recursively returns true if target HTMLElement is within a
|
* Recursively returns true if target HTMLElement is within a
|
||||||
@ -491,7 +495,10 @@ export class ExpandingRowHost implements AfterViewInit,
|
|||||||
// Updates all of the rows with their new index.
|
// Updates all of the rows with their new index.
|
||||||
private recalcRowIndexes() {
|
private recalcRowIndexes() {
|
||||||
let index = 0;
|
let index = 0;
|
||||||
setTimeout(
|
setTimeout(() => {
|
||||||
() => { this.contentRows.forEach((row: ExpandingRow) => { row.index = index++; }); });
|
this.contentRows.forEach((row: ExpandingRow) => {
|
||||||
|
row.index = index++;
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,8 +48,7 @@ export class ExpandingRowSummary implements OnDestroy {
|
|||||||
* reference to compute collapsed height of the row. We also use this
|
* reference to compute collapsed height of the row. We also use this
|
||||||
* reference for focus and blur methods below.
|
* reference for focus and blur methods below.
|
||||||
*/
|
*/
|
||||||
@ViewChild('expandingRowSummaryMainElement')
|
@ViewChild('expandingRowSummaryMainElement') mainElementRef!: ElementRef;
|
||||||
mainElementRef !: ElementRef;
|
|
||||||
|
|
||||||
/** Subscription for changes in parent isExpanded property. */
|
/** Subscription for changes in parent isExpanded property. */
|
||||||
private isExpandedSubscription: Subscription;
|
private isExpandedSubscription: Subscription;
|
||||||
@ -65,11 +64,13 @@ export class ExpandingRowSummary implements OnDestroy {
|
|||||||
*/
|
*/
|
||||||
constructor(@Host() public expandingRow: ExpandingRow, changeDetectorRef: ChangeDetectorRef) {
|
constructor(@Host() public expandingRow: ExpandingRow, changeDetectorRef: ChangeDetectorRef) {
|
||||||
this.expandingRow.summaryViewChild = this;
|
this.expandingRow.summaryViewChild = this;
|
||||||
this.isExpandedSubscription =
|
this.isExpandedSubscription = this.expandingRow.isExpandedChange.subscribe(() => {
|
||||||
this.expandingRow.isExpandedChange.subscribe(() => { changeDetectorRef.markForCheck(); });
|
changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
|
||||||
this.indexSubscription =
|
this.indexSubscription = this.expandingRow.indexChange.subscribe(() => {
|
||||||
this.expandingRow.indexChange.subscribe(() => { changeDetectorRef.markForCheck(); });
|
changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -203,5 +204,7 @@ export class ExpandingRowSummary implements OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** Returns array of focusable elements within this component. */
|
/** Returns array of focusable elements within this component. */
|
||||||
private getFocusableChildren(): HTMLElement[] { return []; }
|
private getFocusableChildren(): HTMLElement[] {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@ import {$, browser} from 'protractor';
|
|||||||
import {runBenchmark} from '../../../e2e_util/perf_util';
|
import {runBenchmark} from '../../../e2e_util/perf_util';
|
||||||
|
|
||||||
describe('benchmarks', () => {
|
describe('benchmarks', () => {
|
||||||
|
|
||||||
it('should work for create', async () => {
|
it('should work for create', async () => {
|
||||||
browser.rootEl = '#root';
|
browser.rootEl = '#root';
|
||||||
await runBenchmark({
|
await runBenchmark({
|
||||||
@ -22,5 +21,4 @@ describe('benchmarks', () => {
|
|||||||
work: () => $('#init').click()
|
work: () => $('#init').click()
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -24,19 +24,25 @@ const Create1KWorker: Worker = {
|
|||||||
const Delete1KWorker: Worker = {
|
const Delete1KWorker: Worker = {
|
||||||
id: 'delete1K',
|
id: 'delete1K',
|
||||||
prepare: () => $('#create1KRows').click(),
|
prepare: () => $('#create1KRows').click(),
|
||||||
work: () => { $('#deleteAll').click(); }
|
work: () => {
|
||||||
|
$('#deleteAll').click();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const UpdateWorker: Worker = {
|
const UpdateWorker: Worker = {
|
||||||
id: 'update',
|
id: 'update',
|
||||||
prepare: () => $('#create1KRows').click(),
|
prepare: () => $('#create1KRows').click(),
|
||||||
work: () => { $('#update').click(); }
|
work: () => {
|
||||||
|
$('#update').click();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const SwapWorker: Worker = {
|
const SwapWorker: Worker = {
|
||||||
id: 'swap',
|
id: 'swap',
|
||||||
prepare: () => $('#create1KRows').click(),
|
prepare: () => $('#create1KRows').click(),
|
||||||
work: () => { $('#swap').click(); }
|
work: () => {
|
||||||
|
$('#swap').click();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// In order to make sure that we don't change the ids of the benchmarks, we need to
|
// In order to make sure that we don't change the ids of the benchmarks, we need to
|
||||||
@ -48,7 +54,6 @@ const SwapWorker: Worker = {
|
|||||||
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
||||||
|
|
||||||
describe('js-web-frameworks benchmark perf', () => {
|
describe('js-web-frameworks benchmark perf', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
[Create1KWorker, Delete1KWorker, UpdateWorker, SwapWorker].forEach((worker) => {
|
[Create1KWorker, Delete1KWorker, UpdateWorker, SwapWorker].forEach((worker) => {
|
||||||
|
@ -42,7 +42,9 @@ export class JsWebFrameworksComponent {
|
|||||||
|
|
||||||
constructor(private _appRef: ApplicationRef) {}
|
constructor(private _appRef: ApplicationRef) {}
|
||||||
|
|
||||||
itemById(index: number, item: RowData) { return item.id; }
|
itemById(index: number, item: RowData) {
|
||||||
|
return item.id;
|
||||||
|
}
|
||||||
|
|
||||||
select(itemId: number) {
|
select(itemId: number) {
|
||||||
this.selected = itemId;
|
this.selected = itemId;
|
||||||
|
@ -11,7 +11,6 @@ import {$, By, element} from 'protractor';
|
|||||||
import {openBrowser, verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {openBrowser, verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('largeform benchmark', () => {
|
describe('largeform benchmark', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
it('should work for ng2', async () => {
|
it('should work for ng2', async () => {
|
||||||
|
@ -26,7 +26,6 @@ const CreateAndDestroyWorker = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
describe('largeform benchmark spec', () => {
|
describe('largeform benchmark spec', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
[CreateAndDestroyWorker].forEach((worker) => {
|
[CreateAndDestroyWorker].forEach((worker) => {
|
||||||
|
@ -17,7 +17,9 @@ const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, attr,
|
|||||||
export class TableComponent {
|
export class TableComponent {
|
||||||
constructor(private _rootEl: any) {}
|
constructor(private _rootEl: any) {}
|
||||||
|
|
||||||
set data(data: TableCell[][]) { patch(this._rootEl, () => this._render(data)); }
|
set data(data: TableCell[][]) {
|
||||||
|
patch(this._rootEl, () => this._render(data));
|
||||||
|
}
|
||||||
|
|
||||||
private _render(data: TableCell[][]) {
|
private _render(data: TableCell[][]) {
|
||||||
elementOpen('table');
|
elementOpen('table');
|
||||||
|
@ -43,7 +43,6 @@ const UpdateWorker: Worker = {
|
|||||||
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
const testPackageName = process.env['BAZEL_TARGET']!.split(':')[0].split('/').pop();
|
||||||
|
|
||||||
describe('largetable benchmark perf', () => {
|
describe('largetable benchmark perf', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, Input, NgModule} from '@angular/core';
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TableCell, emptyTable} from '../util';
|
import {emptyTable, TableCell} from '../util';
|
||||||
|
|
||||||
let trustedEmptyColor: SafeStyle;
|
let trustedEmptyColor: SafeStyle;
|
||||||
let trustedGreyColor: SafeStyle;
|
let trustedGreyColor: SafeStyle;
|
||||||
@ -25,12 +25,15 @@ let trustedGreyColor: SafeStyle;
|
|||||||
</tbody></table>`,
|
</tbody></table>`,
|
||||||
})
|
})
|
||||||
export class TableComponent {
|
export class TableComponent {
|
||||||
@Input()
|
@Input() data: TableCell[][] = emptyTable;
|
||||||
data: TableCell[][] = emptyTable;
|
|
||||||
|
|
||||||
trackByIndex(index: number, item: any) { return index; }
|
trackByIndex(index: number, item: any) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; }
|
getColor(row: number) {
|
||||||
|
return row % 2 ? trustedEmptyColor : trustedGreyColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, Input, NgModule} from '@angular/core';
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
import {BrowserModule} from '@angular/platform-browser';
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TableCell, emptyTable} from '../util';
|
import {emptyTable, TableCell} from '../util';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'largetable',
|
selector: 'largetable',
|
||||||
@ -22,10 +22,11 @@ import {TableCell, emptyTable} from '../util';
|
|||||||
</tbody></table>`
|
</tbody></table>`
|
||||||
})
|
})
|
||||||
export class TableComponent {
|
export class TableComponent {
|
||||||
@Input()
|
@Input() data: TableCell[][] = emptyTable;
|
||||||
data: TableCell[][] = emptyTable;
|
|
||||||
|
|
||||||
trackByIndex(index: number, item: any) { return index; }
|
trackByIndex(index: number, item: any) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
||||||
|
@ -9,7 +9,7 @@ import {ɵrenderComponent as renderComponent} from '@angular/core';
|
|||||||
|
|
||||||
import {bindAction, profile} from '../../util';
|
import {bindAction, profile} from '../../util';
|
||||||
|
|
||||||
import {LargeTableComponent, createDom, destroyDom} from './table';
|
import {createDom, destroyDom, LargeTableComponent} from './table';
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {CommonModule} from '@angular/common';
|
import {CommonModule} from '@angular/common';
|
||||||
import {Component, Input, NgModule, ɵdetectChanges} from '@angular/core';
|
import {Component, Input, NgModule, ɵdetectChanges} from '@angular/core';
|
||||||
|
|
||||||
import {TableCell, buildTable, emptyTable} from '../util';
|
import {buildTable, emptyTable, TableCell} from '../util';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'largetable',
|
selector: 'largetable',
|
||||||
@ -26,12 +26,15 @@ import {TableCell, buildTable, emptyTable} from '../util';
|
|||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class LargeTableComponent {
|
export class LargeTableComponent {
|
||||||
@Input()
|
@Input() data: TableCell[][] = emptyTable;
|
||||||
data: TableCell[][] = emptyTable;
|
|
||||||
|
|
||||||
trackByIndex(index: number, item: any) { return index; }
|
trackByIndex(index: number, item: any) {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
getColor(row: number) { return row % 2 ? '' : 'grey'; }
|
getColor(row: number) {
|
||||||
|
return row % 2 ? '' : 'grey';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [LargeTableComponent], imports: [CommonModule]})
|
@NgModule({declarations: [LargeTableComponent], imports: [CommonModule]})
|
||||||
|
@ -6,27 +6,22 @@
|
|||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import {CompilerConfig, DirectiveResolver} from '@angular/compiler';
|
||||||
|
import {Component, ComponentResolver, Directive, ViewContainerRef,} from '@angular/core';
|
||||||
|
import {ViewMetadata} from '@angular/core/src/metadata/view';
|
||||||
import {PromiseWrapper} from '@angular/facade/src/async';
|
import {PromiseWrapper} from '@angular/facade/src/async';
|
||||||
import {Type, print} from '@angular/facade/src/lang';
|
import {print, Type} from '@angular/facade/src/lang';
|
||||||
import {bootstrap} from '@angular/platform-browser';
|
import {bootstrap} from '@angular/platform-browser';
|
||||||
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
|
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
|
||||||
import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||||
|
import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
|
||||||
import {ComponentResolver, Component, Directive, ViewContainerRef,} from '@angular/core';
|
|
||||||
|
|
||||||
import {ViewMetadata} from '@angular/core/src/metadata/view';
|
|
||||||
|
|
||||||
import {CompilerConfig, DirectiveResolver} from '@angular/compiler';
|
|
||||||
|
|
||||||
import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
|
|
||||||
|
|
||||||
function _createBindings(): any[] {
|
function _createBindings(): any[] {
|
||||||
const multiplyTemplatesBy = getIntParameter('elements');
|
const multiplyTemplatesBy = getIntParameter('elements');
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
provide: DirectiveResolver,
|
provide: DirectiveResolver,
|
||||||
useFactory:
|
useFactory: () => new MultiplyDirectiveResolver(
|
||||||
() => new MultiplyDirectiveResolver(
|
|
||||||
multiplyTemplatesBy, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]),
|
multiplyTemplatesBy, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]),
|
||||||
deps: []
|
deps: []
|
||||||
},
|
},
|
||||||
@ -57,7 +52,9 @@ function measureWrapper(func, desc) {
|
|||||||
const elapsedMs = new Date().getTime() - begin.getTime();
|
const elapsedMs = new Date().getTime() - begin.getTime();
|
||||||
print(`[${desc}] ...done, took ${elapsedMs} ms`);
|
print(`[${desc}] ...done, took ${elapsedMs} ms`);
|
||||||
};
|
};
|
||||||
const onError = function(e) { DOM.logError(e); };
|
const onError = function(e) {
|
||||||
|
DOM.logError(e);
|
||||||
|
};
|
||||||
PromiseWrapper.then(func(), onSuccess, onError);
|
PromiseWrapper.then(func(), onSuccess, onError);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -47,7 +47,9 @@ export function main() {
|
|||||||
function match() {
|
function match() {
|
||||||
let matchCount = 0;
|
let matchCount = 0;
|
||||||
for (let i = 0; i < count; i++) {
|
for (let i = 0; i < count; i++) {
|
||||||
fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; });
|
fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => {
|
||||||
|
matchCount += selected;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return matchCount;
|
return matchCount;
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ import {NgFor, NgIf} from '@angular/common';
|
|||||||
import {Component, Directive, DynamicComponentLoader, ViewContainerRef} from '@angular/core';
|
import {Component, Directive, DynamicComponentLoader, ViewContainerRef} from '@angular/core';
|
||||||
import {ApplicationRef} from '@angular/core/src/application_ref';
|
import {ApplicationRef} from '@angular/core/src/application_ref';
|
||||||
import {ListWrapper} from '@angular/facade/src/lang';
|
import {ListWrapper} from '@angular/facade/src/lang';
|
||||||
import {BrowserModule, bootstrap} from '@angular/platform-browser';
|
import {bootstrap, BrowserModule} from '@angular/platform-browser';
|
||||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||||
import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
|
import {bindAction, getIntParameter} from '@angular/testing/src/benchmark_util';
|
||||||
|
|
||||||
@ -89,7 +89,9 @@ class AppComponent {
|
|||||||
testingWithDirectives: boolean;
|
testingWithDirectives: boolean;
|
||||||
testingDynamicComponents: boolean;
|
testingDynamicComponents: boolean;
|
||||||
|
|
||||||
constructor() { this.reset(); }
|
constructor() {
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
|
||||||
reset(): void {
|
reset(): void {
|
||||||
this.list = [];
|
this.list = [];
|
||||||
|
@ -98,30 +98,42 @@ export function main() {
|
|||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class A {
|
class A {
|
||||||
constructor() { count++; }
|
constructor() {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class B {
|
class B {
|
||||||
constructor(a: A) { count++; }
|
constructor(a: A) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class C {
|
class C {
|
||||||
constructor(b: B) { count++; }
|
constructor(b: B) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class D {
|
class D {
|
||||||
constructor(c: C, b: B) { count++; }
|
constructor(c: C, b: B) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class E {
|
class E {
|
||||||
constructor(d: D, c: C) { count++; }
|
constructor(d: D, c: C) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
class F {
|
class F {
|
||||||
constructor(e: E, d: D) { count++; }
|
constructor(e: E, d: D) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -45,7 +45,9 @@ export class App {
|
|||||||
for (let i = 0; i < appSize; i++) {
|
for (let i = 0; i < appSize; i++) {
|
||||||
this.scrollAreas.push(i);
|
this.scrollAreas.push(i);
|
||||||
}
|
}
|
||||||
bindAction('#run-btn', () => { this.runBenchmark(); });
|
bindAction('#run-btn', () => {
|
||||||
|
this.runBenchmark();
|
||||||
|
});
|
||||||
bindAction('#reset-btn', () => {
|
bindAction('#reset-btn', () => {
|
||||||
this._getScrollDiv().scrollTop = 0;
|
this._getScrollDiv().scrollTop = 0;
|
||||||
const existingMarker = this._locateFinishedMarker();
|
const existingMarker = this._locateFinishedMarker();
|
||||||
@ -88,7 +90,11 @@ export class App {
|
|||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _locateFinishedMarker() { return DOM.querySelector(document.body, '#done'); }
|
private _locateFinishedMarker() {
|
||||||
|
return DOM.querySelector(document.body, '#done');
|
||||||
private _getScrollDiv() { return DOM.query('body /deep/ #scrollDiv'); }
|
}
|
||||||
|
|
||||||
|
private _getScrollDiv() {
|
||||||
|
return DOM.query('body /deep/ #scrollDiv');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,9 @@ export class HasStyle {
|
|||||||
|
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
||||||
set width(w: number) { this.cellWidth = w; }
|
set width(w: number) {
|
||||||
|
this.cellWidth = w;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -74,7 +76,9 @@ export class StageButtonsComponent extends HasStyle {
|
|||||||
private _offering: Offering;
|
private _offering: Offering;
|
||||||
stages: Stage[];
|
stages: Stage[];
|
||||||
|
|
||||||
get offering(): Offering { return this._offering; }
|
get offering(): Offering {
|
||||||
|
return this._offering;
|
||||||
|
}
|
||||||
|
|
||||||
set offering(offering: Offering) {
|
set offering(offering: Offering) {
|
||||||
this._offering = offering;
|
this._offering = offering;
|
||||||
|
@ -56,13 +56,17 @@ export class CustomDate {
|
|||||||
return new CustomDate(newYear, newMonth, newDay);
|
return new CustomDate(newYear, newMonth, newDay);
|
||||||
}
|
}
|
||||||
|
|
||||||
static now(): CustomDate { return new CustomDate(2014, 1, 28); }
|
static now(): CustomDate {
|
||||||
|
return new CustomDate(2014, 1, 28);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class RawEntity {
|
export class RawEntity {
|
||||||
private _data: Map<any, any>;
|
private _data: Map<any, any>;
|
||||||
|
|
||||||
constructor() { this._data = new Map(); }
|
constructor() {
|
||||||
|
this._data = new Map();
|
||||||
|
}
|
||||||
|
|
||||||
get(key: string) {
|
get(key: string) {
|
||||||
if (key.indexOf('.') == -1) {
|
if (key.indexOf('.') == -1) {
|
||||||
@ -114,51 +118,107 @@ export class RawEntity {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class Company extends RawEntity {
|
export class Company extends RawEntity {
|
||||||
get name(): string { return this.get('name'); }
|
get name(): string {
|
||||||
set name(val: string) { this.set('name', val); }
|
return this.get('name');
|
||||||
|
}
|
||||||
|
set name(val: string) {
|
||||||
|
this.set('name', val);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Offering extends RawEntity {
|
export class Offering extends RawEntity {
|
||||||
get name(): string { return this.get('name'); }
|
get name(): string {
|
||||||
set name(val: string) { this.set('name', val); }
|
return this.get('name');
|
||||||
|
}
|
||||||
|
set name(val: string) {
|
||||||
|
this.set('name', val);
|
||||||
|
}
|
||||||
|
|
||||||
get company(): Company { return this.get('company'); }
|
get company(): Company {
|
||||||
set company(val: Company) { this.set('company', val); }
|
return this.get('company');
|
||||||
|
}
|
||||||
|
set company(val: Company) {
|
||||||
|
this.set('company', val);
|
||||||
|
}
|
||||||
|
|
||||||
get opportunity(): Opportunity { return this.get('opportunity'); }
|
get opportunity(): Opportunity {
|
||||||
set opportunity(val: Opportunity) { this.set('opportunity', val); }
|
return this.get('opportunity');
|
||||||
|
}
|
||||||
|
set opportunity(val: Opportunity) {
|
||||||
|
this.set('opportunity', val);
|
||||||
|
}
|
||||||
|
|
||||||
get account(): Account { return this.get('account'); }
|
get account(): Account {
|
||||||
set account(val: Account) { this.set('account', val); }
|
return this.get('account');
|
||||||
|
}
|
||||||
|
set account(val: Account) {
|
||||||
|
this.set('account', val);
|
||||||
|
}
|
||||||
|
|
||||||
get basePoints(): number { return this.get('basePoints'); }
|
get basePoints(): number {
|
||||||
set basePoints(val: number) { this.set('basePoints', val); }
|
return this.get('basePoints');
|
||||||
|
}
|
||||||
|
set basePoints(val: number) {
|
||||||
|
this.set('basePoints', val);
|
||||||
|
}
|
||||||
|
|
||||||
get kickerPoints(): number { return this.get('kickerPoints'); }
|
get kickerPoints(): number {
|
||||||
set kickerPoints(val: number) { this.set('kickerPoints', val); }
|
return this.get('kickerPoints');
|
||||||
|
}
|
||||||
|
set kickerPoints(val: number) {
|
||||||
|
this.set('kickerPoints', val);
|
||||||
|
}
|
||||||
|
|
||||||
get status(): string { return this.get('status'); }
|
get status(): string {
|
||||||
set status(val: string) { this.set('status', val); }
|
return this.get('status');
|
||||||
|
}
|
||||||
|
set status(val: string) {
|
||||||
|
this.set('status', val);
|
||||||
|
}
|
||||||
|
|
||||||
get bundles(): string { return this.get('bundles'); }
|
get bundles(): string {
|
||||||
set bundles(val: string) { this.set('bundles', val); }
|
return this.get('bundles');
|
||||||
|
}
|
||||||
|
set bundles(val: string) {
|
||||||
|
this.set('bundles', val);
|
||||||
|
}
|
||||||
|
|
||||||
get dueDate(): CustomDate { return this.get('dueDate'); }
|
get dueDate(): CustomDate {
|
||||||
set dueDate(val: CustomDate) { this.set('dueDate', val); }
|
return this.get('dueDate');
|
||||||
|
}
|
||||||
|
set dueDate(val: CustomDate) {
|
||||||
|
this.set('dueDate', val);
|
||||||
|
}
|
||||||
|
|
||||||
get endDate(): CustomDate { return this.get('endDate'); }
|
get endDate(): CustomDate {
|
||||||
set endDate(val: CustomDate) { this.set('endDate', val); }
|
return this.get('endDate');
|
||||||
|
}
|
||||||
|
set endDate(val: CustomDate) {
|
||||||
|
this.set('endDate', val);
|
||||||
|
}
|
||||||
|
|
||||||
get aatStatus(): string { return this.get('aatStatus'); }
|
get aatStatus(): string {
|
||||||
set aatStatus(val: string) { this.set('aatStatus', val); }
|
return this.get('aatStatus');
|
||||||
|
}
|
||||||
|
set aatStatus(val: string) {
|
||||||
|
this.set('aatStatus', val);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Opportunity extends RawEntity {
|
export class Opportunity extends RawEntity {
|
||||||
get name(): string { return this.get('name'); }
|
get name(): string {
|
||||||
set name(val: string) { this.set('name', val); }
|
return this.get('name');
|
||||||
|
}
|
||||||
|
set name(val: string) {
|
||||||
|
this.set('name', val);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Account extends RawEntity {
|
export class Account extends RawEntity {
|
||||||
get accountId(): number { return this.get('accountId'); }
|
get accountId(): number {
|
||||||
set accountId(val: number) { this.set('accountId', val); }
|
return this.get('accountId');
|
||||||
|
}
|
||||||
|
set accountId(val: number) {
|
||||||
|
this.set('accountId', val);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {NgFor} from '@angular/common';
|
import {NgFor} from '@angular/common';
|
||||||
import {Component, Directive} from '@angular/core';
|
import {Component, Directive} from '@angular/core';
|
||||||
|
|
||||||
import {HEIGHT, ITEMS, ITEM_HEIGHT, Offering, ROW_WIDTH, VIEW_PORT_HEIGHT, VISIBLE_ITEMS} from './common';
|
import {HEIGHT, ITEM_HEIGHT, ITEMS, Offering, ROW_WIDTH, VIEW_PORT_HEIGHT, VISIBLE_ITEMS} from './common';
|
||||||
import {generateOfferings} from './random_data';
|
import {generateOfferings} from './random_data';
|
||||||
import {ScrollItemComponent} from './scroll_item';
|
import {ScrollItemComponent} from './scroll_item';
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, Directive} from '@angular/core';
|
import {Component, Directive} from '@angular/core';
|
||||||
|
|
||||||
import {AccountCellComponent, CompanyNameComponent, FormattedCellComponent, OfferingNameComponent, OpportunityNameComponent, StageButtonsComponent} from './cells';
|
import {AccountCellComponent, CompanyNameComponent, FormattedCellComponent, OfferingNameComponent, OpportunityNameComponent, StageButtonsComponent} from './cells';
|
||||||
import {AAT_STATUS_WIDTH, ACCOUNT_CELL_WIDTH, BASE_POINTS_WIDTH, BUNDLES_WIDTH, COMPANY_NAME_WIDTH, DUE_DATE_WIDTH, END_DATE_WIDTH, ITEM_HEIGHT, KICKER_POINTS_WIDTH, OFFERING_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH, Offering, STAGE_BUTTONS_WIDTH} from './common';
|
import {AAT_STATUS_WIDTH, ACCOUNT_CELL_WIDTH, BASE_POINTS_WIDTH, BUNDLES_WIDTH, COMPANY_NAME_WIDTH, DUE_DATE_WIDTH, END_DATE_WIDTH, ITEM_HEIGHT, KICKER_POINTS_WIDTH, Offering, OFFERING_NAME_WIDTH, OPPORTUNITY_NAME_WIDTH, STAGE_BUTTONS_WIDTH} from './common';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'scroll-item',
|
selector: 'scroll-item',
|
||||||
@ -63,17 +63,41 @@ export class ScrollItemComponent {
|
|||||||
|
|
||||||
itemHeight: number;
|
itemHeight: number;
|
||||||
|
|
||||||
constructor() { this.itemHeight = ITEM_HEIGHT; }
|
constructor() {
|
||||||
|
this.itemHeight = ITEM_HEIGHT;
|
||||||
get companyNameWidth() { return COMPANY_NAME_WIDTH; }
|
}
|
||||||
get opportunityNameWidth() { return OPPORTUNITY_NAME_WIDTH; }
|
|
||||||
get offeringNameWidth() { return OFFERING_NAME_WIDTH; }
|
get companyNameWidth() {
|
||||||
get accountCellWidth() { return ACCOUNT_CELL_WIDTH; }
|
return COMPANY_NAME_WIDTH;
|
||||||
get basePointsWidth() { return BASE_POINTS_WIDTH; }
|
}
|
||||||
get kickerPointsWidth() { return KICKER_POINTS_WIDTH; }
|
get opportunityNameWidth() {
|
||||||
get stageButtonsWidth() { return STAGE_BUTTONS_WIDTH; }
|
return OPPORTUNITY_NAME_WIDTH;
|
||||||
get bundlesWidth() { return BUNDLES_WIDTH; }
|
}
|
||||||
get dueDateWidth() { return DUE_DATE_WIDTH; }
|
get offeringNameWidth() {
|
||||||
get endDateWidth() { return END_DATE_WIDTH; }
|
return OFFERING_NAME_WIDTH;
|
||||||
get aatStatusWidth() { return AAT_STATUS_WIDTH; }
|
}
|
||||||
|
get accountCellWidth() {
|
||||||
|
return ACCOUNT_CELL_WIDTH;
|
||||||
|
}
|
||||||
|
get basePointsWidth() {
|
||||||
|
return BASE_POINTS_WIDTH;
|
||||||
|
}
|
||||||
|
get kickerPointsWidth() {
|
||||||
|
return KICKER_POINTS_WIDTH;
|
||||||
|
}
|
||||||
|
get stageButtonsWidth() {
|
||||||
|
return STAGE_BUTTONS_WIDTH;
|
||||||
|
}
|
||||||
|
get bundlesWidth() {
|
||||||
|
return BUNDLES_WIDTH;
|
||||||
|
}
|
||||||
|
get dueDateWidth() {
|
||||||
|
return DUE_DATE_WIDTH;
|
||||||
|
}
|
||||||
|
get endDateWidth() {
|
||||||
|
return END_DATE_WIDTH;
|
||||||
|
}
|
||||||
|
get aatStatusWidth() {
|
||||||
|
return AAT_STATUS_WIDTH;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,9 @@ export function init(moduleRef: NgModuleRef<StylingModule>) {
|
|||||||
appRef.tick();
|
appRef.tick();
|
||||||
}
|
}
|
||||||
|
|
||||||
function detectChanges() { appRef.tick(); }
|
function detectChanges() {
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
function modifyExternally() {
|
function modifyExternally() {
|
||||||
const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[];
|
const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[];
|
||||||
|
@ -35,7 +35,9 @@ export class StylingComponent {
|
|||||||
tplRefIdx: number = 0;
|
tplRefIdx: number = 0;
|
||||||
staticStyle = {width: '10px'};
|
staticStyle = {width: '10px'};
|
||||||
|
|
||||||
getTplRef(...tplRefs): TemplateRef<any> { return tplRefs[this.tplRefIdx]; }
|
getTplRef(...tplRefs): TemplateRef<any> {
|
||||||
|
return tplRefs[this.tplRefIdx];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -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 {TreeNode, newArray} from '../util';
|
import {newArray, TreeNode} from '../util';
|
||||||
|
|
||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
private _renderNodes: any[];
|
private _renderNodes: any[];
|
||||||
|
@ -17,7 +17,9 @@ const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, text,
|
|||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
constructor(private _rootEl: any) {}
|
constructor(private _rootEl: any) {}
|
||||||
|
|
||||||
set data(data: TreeNode) { patch(this._rootEl, () => this._render(data)); }
|
set data(data: TreeNode) {
|
||||||
|
patch(this._rootEl, () => this._render(data));
|
||||||
|
}
|
||||||
|
|
||||||
private _render(data: TreeNode) {
|
private _render(data: TreeNode) {
|
||||||
elementOpenStart('span', '', null);
|
elementOpenStart('span', '', null);
|
||||||
|
@ -31,11 +31,15 @@ function init() {
|
|||||||
function noop() {}
|
function noop() {}
|
||||||
|
|
||||||
function destroyDom() {
|
function destroyDom() {
|
||||||
$rootScope.$apply(() => { $rootScope.initData = emptyTree; });
|
$rootScope.$apply(() => {
|
||||||
|
$rootScope.initData = emptyTree;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function createDom() {
|
function createDom() {
|
||||||
$rootScope.$apply(() => { $rootScope.initData = buildTree(); });
|
$rootScope.$apply(() => {
|
||||||
|
$rootScope.initData = buildTree();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
bindAction('#destroyDom', destroyDom);
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
@ -41,7 +41,6 @@ export function addTreeToModule(mod: any): any {
|
|||||||
}
|
}
|
||||||
let childElement: any, childScope: any;
|
let childElement: any, childScope: any;
|
||||||
$scope.$watch($attr.data, function ngIfWatchAction(value: any) {
|
$scope.$watch($attr.data, function ngIfWatchAction(value: any) {
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
if (!childScope) {
|
if (!childScope) {
|
||||||
childScope = $scope.$new();
|
childScope = $scope.$new();
|
||||||
@ -67,6 +66,8 @@ export function addTreeToModule(mod: any): any {
|
|||||||
])
|
])
|
||||||
.config([
|
.config([
|
||||||
'$compileProvider',
|
'$compileProvider',
|
||||||
function($compileProvider: any) { $compileProvider.debugInfoEnabled(false); }
|
function($compileProvider: any) {
|
||||||
|
$compileProvider.debugInfoEnabled(false);
|
||||||
|
}
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, NgModule} from '@angular/core';
|
import {Component, NgModule} from '@angular/core';
|
||||||
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TreeNode, emptyTree} from '../util';
|
import {emptyTree, TreeNode} from '../util';
|
||||||
|
|
||||||
let trustedEmptyColor: SafeStyle;
|
let trustedEmptyColor: SafeStyle;
|
||||||
let trustedGreyColor: SafeStyle;
|
let trustedGreyColor: SafeStyle;
|
||||||
@ -22,7 +22,9 @@ let trustedGreyColor: SafeStyle;
|
|||||||
})
|
})
|
||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
data: TreeNode = emptyTree;
|
data: TreeNode = emptyTree;
|
||||||
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
|
get bgColor() {
|
||||||
|
return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
|
@NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
|
||||||
|
@ -7,17 +7,19 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {NgIf} from '@angular/common';
|
import {NgIf} from '@angular/common';
|
||||||
import {ComponentFactory, ComponentFactoryResolver, ComponentRef, ErrorHandler, Injector, NgModuleRef, RendererFactory2, Sanitizer, TemplateRef, ViewContainerRef, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵNodeFlags as NodeFlags, ɵViewDefinition as ViewDefinition, ɵViewFlags as ViewFlags, ɵand as anchorDef, ɵccf as createComponentFactory, ɵdid as directiveDef, ɵeld as elementDef, ɵinitServicesIfNeeded as initServicesIfNeeded, ɵted as textDef, ɵvid as viewDef} from '@angular/core';
|
import {ComponentFactory, ComponentFactoryResolver, ComponentRef, ErrorHandler, Injector, NgModuleRef, RendererFactory2, Sanitizer, TemplateRef, ViewContainerRef, ɵand as anchorDef, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵccf as createComponentFactory, ɵdid as directiveDef, ɵeld as elementDef, ɵinitServicesIfNeeded as initServicesIfNeeded, ɵNodeFlags as NodeFlags, ɵted as textDef, ɵvid as viewDef, ɵViewDefinition as ViewDefinition, ɵViewFlags as ViewFlags} from '@angular/core';
|
||||||
import {SafeStyle, ɵDomRendererFactory2 as DomRendererFactory2, ɵDomSanitizerImpl as DomSanitizerImpl} from '@angular/platform-browser';
|
import {SafeStyle, ɵDomRendererFactory2 as DomRendererFactory2, ɵDomSanitizerImpl as DomSanitizerImpl} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TreeNode, emptyTree} from '../util';
|
import {emptyTree, TreeNode} from '../util';
|
||||||
|
|
||||||
let trustedEmptyColor: SafeStyle;
|
let trustedEmptyColor: SafeStyle;
|
||||||
let trustedGreyColor: SafeStyle;
|
let trustedGreyColor: SafeStyle;
|
||||||
|
|
||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
data: TreeNode = emptyTree;
|
data: TreeNode = emptyTree;
|
||||||
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
|
get bgColor() {
|
||||||
|
return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let viewFlags = ViewFlags.None;
|
let viewFlags = ViewFlags.None;
|
||||||
@ -120,11 +122,19 @@ export class AppModule implements Injector, NgModuleRef<any> {
|
|||||||
this.componentFactory.create(Injector.NULL, [], this.componentFactory.selector, this);
|
this.componentFactory.create(Injector.NULL, [], this.componentFactory.selector, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
tick() { this.componentRef.changeDetectorRef.detectChanges(); }
|
tick() {
|
||||||
|
this.componentRef.changeDetectorRef.detectChanges();
|
||||||
|
}
|
||||||
|
|
||||||
get injector() { return this; }
|
get injector() {
|
||||||
get componentFactoryResolver(): ComponentFactoryResolver { return null; }
|
return this;
|
||||||
get instance() { return this; }
|
}
|
||||||
|
get componentFactoryResolver(): ComponentFactoryResolver {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
get instance() {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
destroy() {}
|
destroy() {}
|
||||||
onDestroy(callback: () => void) {}
|
onDestroy(callback: () => void) {}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, Input, NgModule} from '@angular/core';
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TreeNode, emptyTree, getMaxDepth} from '../util';
|
import {emptyTree, getMaxDepth, TreeNode} from '../util';
|
||||||
|
|
||||||
let trustedEmptyColor: SafeStyle;
|
let trustedEmptyColor: SafeStyle;
|
||||||
let trustedGreyColor: SafeStyle;
|
let trustedGreyColor: SafeStyle;
|
||||||
@ -18,15 +18,16 @@ function createTreeComponent(level: number, isLeaf: boolean) {
|
|||||||
const nextTreeEl = `tree${level + 1}`;
|
const nextTreeEl = `tree${level + 1}`;
|
||||||
let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
|
let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
|
||||||
if (!isLeaf) {
|
if (!isLeaf) {
|
||||||
template +=
|
template += `<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${
|
||||||
`<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
|
nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: `tree${level}`, template: template})
|
@Component({selector: `tree${level}`, template: template})
|
||||||
class TreeComponent {
|
class TreeComponent {
|
||||||
@Input()
|
@Input() data: TreeNode;
|
||||||
data: TreeNode;
|
get bgColor() {
|
||||||
get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
|
return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return TreeComponent;
|
return TreeComponent;
|
||||||
@ -34,8 +35,7 @@ function createTreeComponent(level: number, isLeaf: boolean) {
|
|||||||
|
|
||||||
@Component({selector: 'tree', template: `<tree0 *ngIf="data.left != null" [data]='data'></tree0>`})
|
@Component({selector: 'tree', template: `<tree0 *ngIf="data.left != null" [data]='data'></tree0>`})
|
||||||
export class RootTreeComponent {
|
export class RootTreeComponent {
|
||||||
@Input()
|
@Input() data: TreeNode = emptyTree;
|
||||||
data: TreeNode = emptyTree;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createModule(): any {
|
function createModule(): any {
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
import {Component, Input, NgModule} from '@angular/core';
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
import {BrowserModule} from '@angular/platform-browser';
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
|
|
||||||
import {TreeNode, emptyTree} from '../util';
|
import {emptyTree, TreeNode} from '../util';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'tree',
|
selector: 'tree',
|
||||||
@ -19,8 +19,7 @@ import {TreeNode, emptyTree} from '../util';
|
|||||||
<tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
|
<tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
|
||||||
})
|
})
|
||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
@Input()
|
@Input() data: TreeNode = emptyTree;
|
||||||
data: TreeNode = emptyTree;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -7,8 +7,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {ɵrenderComponent as renderComponent} from '@angular/core';
|
import {ɵrenderComponent as renderComponent} from '@angular/core';
|
||||||
|
|
||||||
import {bindAction, profile} from '../../util';
|
import {bindAction, profile} from '../../util';
|
||||||
import {TreeComponent, createDom, destroyDom, detectChanges} from './tree';
|
|
||||||
|
import {createDom, destroyDom, detectChanges, TreeComponent} from './tree';
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
|
|
||||||
|
@ -42,7 +42,9 @@ export function detectChanges(component: TreeComponent) {
|
|||||||
})
|
})
|
||||||
export class TreeComponent {
|
export class TreeComponent {
|
||||||
data: any = emptyTree;
|
data: any = emptyTree;
|
||||||
get bgColor() { return this.data.depth % 2 ? '' : 'grey'; }
|
get bgColor() {
|
||||||
|
return this.data.depth % 2 ? '' : 'grey';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [TreeComponent], imports: [CommonModule]})
|
@NgModule({declarations: [TreeComponent], imports: [CommonModule]})
|
||||||
|
@ -6,11 +6,11 @@
|
|||||||
* 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, ɵɵadvance, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵstyleProp, ɵɵtext, ɵɵtextInterpolate1} from '@angular/core';
|
import {ɵrenderComponent as renderComponent, ɵRenderFlags, ɵɵadvance, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵstyleProp, ɵɵtext, ɵɵtextInterpolate1} 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';
|
||||||
import {TreeNode, emptyTree} from '../util';
|
import {emptyTree, TreeNode} from '../util';
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
|
|
||||||
@ -26,7 +26,8 @@ export class TreeFunction {
|
|||||||
selectors: [['tree']],
|
selectors: [['tree']],
|
||||||
decls: 5,
|
decls: 5,
|
||||||
vars: 2,
|
vars: 2,
|
||||||
template: function(rf: ɵRenderFlags, ctx: TreeFunction) {
|
template:
|
||||||
|
function(rf: ɵRenderFlags, ctx: TreeFunction) {
|
||||||
// bit of a hack
|
// bit of a hack
|
||||||
TreeTpl(rf, ctx.data);
|
TreeTpl(rf, ctx.data);
|
||||||
},
|
},
|
||||||
|
@ -21,7 +21,9 @@ export class TreeNode {
|
|||||||
|
|
||||||
// Needed for Polymer as it does not support ternary nor modulo operator
|
// Needed for Polymer as it does not support ternary nor modulo operator
|
||||||
// in expressions
|
// in expressions
|
||||||
get style(): string { return this.depth % 2 === 0 ? 'background-color: grey' : ''; }
|
get style(): string {
|
||||||
|
return this.depth % 2 === 0 ? 'background-color: grey' : '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let treeCreateCount: number;
|
let treeCreateCount: number;
|
||||||
|
@ -66,7 +66,8 @@ function reportProfileResults(durations: number[], count: number) {
|
|||||||
Number.MAX_SAFE_INTEGER)
|
Number.MAX_SAFE_INTEGER)
|
||||||
.toFixed(2);
|
.toFixed(2);
|
||||||
window.console.log(
|
window.console.log(
|
||||||
`Iterations: ${count}; cold time: ${durations[0].toFixed(2)} ms; average time: ${avgDuration} ms / iteration; best time: ${minDuration} ms`);
|
`Iterations: ${count}; cold time: ${durations[0].toFixed(2)} ms; average time: ${
|
||||||
|
avgDuration} ms / iteration; best time: ${minDuration} ms`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// helper script that will read out the url parameters
|
// helper script that will read out the url parameters
|
||||||
|
@ -20,7 +20,9 @@ export class ViewManipulationDirective {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clear() { this._vcRef.clear(); }
|
clear() {
|
||||||
|
this._vcRef.clear();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -44,9 +46,13 @@ export class ViewsBenchmark {
|
|||||||
|
|
||||||
constructor(private _cdRef: ChangeDetectorRef) {}
|
constructor(private _cdRef: ChangeDetectorRef) {}
|
||||||
|
|
||||||
create(vm: ViewManipulationDirective) { vm.create(1000); }
|
create(vm: ViewManipulationDirective) {
|
||||||
|
vm.create(1000);
|
||||||
|
}
|
||||||
|
|
||||||
destroy(vm: ViewManipulationDirective) { vm.clear(); }
|
destroy(vm: ViewManipulationDirective) {
|
||||||
|
vm.clear();
|
||||||
|
}
|
||||||
|
|
||||||
check() {
|
check() {
|
||||||
for (let i = 0; i < 10000; i++) {
|
for (let i = 0; i < 10000; i++) {
|
||||||
|
@ -11,7 +11,6 @@ import {browser} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('hello world', function() {
|
describe('hello world', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
describe('hello world app', function() {
|
describe('hello world app', function() {
|
||||||
@ -30,7 +29,6 @@ describe('hello world', function() {
|
|||||||
expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
|
expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function getComponentText(selector: string, innerSelector: string) {
|
function getComponentText(selector: string, innerSelector: string) {
|
||||||
|
@ -11,7 +11,6 @@ import {browser} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('http', function() {
|
describe('http', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
describe('fetching', function() {
|
describe('fetching', function() {
|
||||||
@ -25,6 +24,6 @@ describe('http', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function getComponentText(selector: string, innerSelector: string) {
|
function getComponentText(selector: string, innerSelector: string) {
|
||||||
return browser.executeScript(
|
return browser.executeScript(`return document.querySelector("${selector}").querySelector("${
|
||||||
`return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
|
innerSelector}").textContent.trim()`);
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,6 @@ import {browser} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('jsonp', function() {
|
describe('jsonp', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
describe('fetching', function() {
|
describe('fetching', function() {
|
||||||
@ -25,6 +24,6 @@ describe('jsonp', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function getComponentText(selector: string, innerSelector: string) {
|
function getComponentText(selector: string, innerSelector: string) {
|
||||||
return browser.executeScript(
|
return browser.executeScript(`return document.querySelector("${selector}").querySelector("${
|
||||||
`return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
|
innerSelector}").textContent.trim()`);
|
||||||
}
|
}
|
||||||
|
@ -13,11 +13,12 @@ import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
|||||||
const Key = protractor.Key;
|
const Key = protractor.Key;
|
||||||
|
|
||||||
describe('key_events', function() {
|
describe('key_events', function() {
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
beforeEach(() => { browser.get(URL); });
|
beforeEach(() => {
|
||||||
|
browser.get(URL);
|
||||||
|
});
|
||||||
|
|
||||||
it('should display correct key names', function() {
|
it('should display correct key names', function() {
|
||||||
const firstArea = element.all(by.css('.sample-area')).get(0);
|
const firstArea = element.all(by.css('.sample-area')).get(0);
|
||||||
@ -78,5 +79,4 @@ describe('key_events', function() {
|
|||||||
secondArea.sendKeys(Key.CONTROL, Key.SHIFT, Key.ENTER);
|
secondArea.sendKeys(Key.CONTROL, Key.SHIFT, Key.ENTER);
|
||||||
expect(secondArea.getText()).toEqual('');
|
expect(secondArea.getText()).toEqual('');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -11,7 +11,6 @@ import {browser, by, element} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('Model-Driven Forms', function() {
|
describe('Model-Driven Forms', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
@ -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 {$, ExpectedConditions, browser, by, element} from 'protractor';
|
import {$, browser, by, element, ExpectedConditions} from 'protractor';
|
||||||
|
|
||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
@ -16,7 +16,6 @@ function waitForElement(selector: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe('relative assets relative-app', () => {
|
describe('relative assets relative-app', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
@ -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 {$, ExpectedConditions, browser, by, element} from 'protractor';
|
import {$, browser, by, element, ExpectedConditions} from 'protractor';
|
||||||
|
|
||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
@ -16,7 +16,6 @@ function waitForElement(selector: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe('routing inbox-app', () => {
|
describe('routing inbox-app', () => {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
describe('index view', () => {
|
describe('index view', () => {
|
||||||
|
@ -11,15 +11,15 @@ import {browser, by, element} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('SVG', function() {
|
describe('SVG', function() {
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
beforeEach(() => { browser.get(URL); });
|
beforeEach(() => {
|
||||||
|
browser.get(URL);
|
||||||
|
});
|
||||||
|
|
||||||
it('should display SVG component contents', function() {
|
it('should display SVG component contents', function() {
|
||||||
const svgText = element.all(by.css('g text')).get(0);
|
const svgText = element.all(by.css('g text')).get(0);
|
||||||
expect(svgText.getText()).toEqual('Hello');
|
expect(svgText.getText()).toEqual('Hello');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -11,7 +11,6 @@ import {browser, by, element} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('Template-Driven Forms', function() {
|
describe('Template-Driven Forms', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
@ -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 {ExpectedConditions, browser, by, element, protractor} from 'protractor';
|
import {browser, by, element, ExpectedConditions, protractor} from 'protractor';
|
||||||
|
|
||||||
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
|
@ -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 {ExpectedConditions, browser, by, element, protractor} from 'protractor';
|
import {browser, by, element, ExpectedConditions, protractor} from 'protractor';
|
||||||
|
|
||||||
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
@ -27,7 +27,6 @@ describe('WebWorkers Kitchen Sink', function() {
|
|||||||
const elem = element(by.css(selector));
|
const elem = element(by.css(selector));
|
||||||
browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'hello world!'), 5000);
|
browser.wait(ExpectedConditions.textToBePresentInElement(elem, 'hello world!'), 5000);
|
||||||
expect(elem.getText()).toEqual('hello world!');
|
expect(elem.getText()).toEqual('hello world!');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should change greeting', () => {
|
it('should change greeting', () => {
|
||||||
|
@ -6,14 +6,13 @@
|
|||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {ExpectedConditions, browser, by, element, protractor} from 'protractor';
|
import {browser, by, element, ExpectedConditions, protractor} from 'protractor';
|
||||||
|
|
||||||
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
|
||||||
describe('MessageBroker', function() {
|
describe('MessageBroker', function() {
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
verifyNoBrowserErrors();
|
verifyNoBrowserErrors();
|
||||||
browser.ignoreSynchronization = false;
|
browser.ignoreSynchronization = false;
|
||||||
|
@ -69,7 +69,9 @@ describe('WebWorker Router', () => {
|
|||||||
browser.wait(() => {
|
browser.wait(() => {
|
||||||
const deferred = protractor.promise.defer();
|
const deferred = protractor.promise.defer();
|
||||||
const elem = element(by.css(contentSelector));
|
const elem = element(by.css(contentSelector));
|
||||||
elem.getText().then((text: string) => { return deferred.fulfill(text === expected); });
|
elem.getText().then((text: string) => {
|
||||||
|
return deferred.fulfill(text === expected);
|
||||||
|
});
|
||||||
return deferred.promise;
|
return deferred.promise;
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
@ -77,8 +79,9 @@ describe('WebWorker Router', () => {
|
|||||||
function waitForUrl(regex: RegExp): void {
|
function waitForUrl(regex: RegExp): void {
|
||||||
browser.wait(() => {
|
browser.wait(() => {
|
||||||
const deferred = protractor.promise.defer();
|
const deferred = protractor.promise.defer();
|
||||||
browser.getCurrentUrl().then(
|
browser.getCurrentUrl().then((url: string) => {
|
||||||
(url: string) => { return deferred.fulfill(url.match(regex) !== null); });
|
return deferred.fulfill(url.match(regex) !== null);
|
||||||
|
});
|
||||||
return deferred.promise;
|
return deferred.promise;
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,6 @@ describe('WebWorkers Todo', function() {
|
|||||||
waitForBootstrap();
|
waitForBootstrap();
|
||||||
expect(element(by.css('#todoapp header')).getText()).toEqual('todos');
|
expect(element(by.css('#todoapp header')).getText()).toEqual('todos');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function waitForBootstrap(): void {
|
function waitForBootstrap(): void {
|
||||||
|
@ -11,13 +11,14 @@ import {browser, by, element} from 'protractor';
|
|||||||
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
|
||||||
|
|
||||||
describe('Zippy Component', function() {
|
describe('Zippy Component', function() {
|
||||||
|
|
||||||
afterEach(verifyNoBrowserErrors);
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
describe('zippy', function() {
|
describe('zippy', function() {
|
||||||
const URL = '/';
|
const URL = '/';
|
||||||
|
|
||||||
beforeEach(function() { browser.get(URL); });
|
beforeEach(function() {
|
||||||
|
browser.get(URL);
|
||||||
|
});
|
||||||
|
|
||||||
it('should change the zippy title depending on it\'s state', function() {
|
it('should change the zippy title depending on it\'s state', function() {
|
||||||
const zippyTitle = element(by.css('.zippy__title'));
|
const zippyTitle = element(by.css('.zippy__title'));
|
||||||
|
@ -87,7 +87,9 @@ export class AnimateApp {
|
|||||||
alert(`backgroundAnimation has ${phase} from ${data['fromState']} to ${data['toState']}`);
|
alert(`backgroundAnimation has ${phase} from ${data['fromState']} to ${data['toState']}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
get state() { return this._state; }
|
get state() {
|
||||||
|
return this._state;
|
||||||
|
}
|
||||||
set state(s) {
|
set state(s) {
|
||||||
this._state = s;
|
this._state = s;
|
||||||
if (s == 'void') {
|
if (s == 'void') {
|
||||||
|
@ -43,7 +43,9 @@ class AsyncApplication {
|
|||||||
multiTimeoutId: any = null;
|
multiTimeoutId: any = null;
|
||||||
intervalId: any = null;
|
intervalId: any = null;
|
||||||
|
|
||||||
increment(): void { this.val1++; }
|
increment(): void {
|
||||||
|
this.val1++;
|
||||||
|
}
|
||||||
|
|
||||||
delayedIncrement(): void {
|
delayedIncrement(): void {
|
||||||
this.cancelDelayedIncrement();
|
this.cancelDelayedIncrement();
|
||||||
|
@ -16,11 +16,17 @@ class GesturesCmp {
|
|||||||
pinchScale: number = 1;
|
pinchScale: number = 1;
|
||||||
rotateAngle: number = 0;
|
rotateAngle: number = 0;
|
||||||
|
|
||||||
onSwipe(event: HammerInput): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
|
onSwipe(event: HammerInput): void {
|
||||||
|
this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
|
||||||
|
}
|
||||||
|
|
||||||
onPinch(event: HammerInput): void { this.pinchScale = event.scale; }
|
onPinch(event: HammerInput): void {
|
||||||
|
this.pinchScale = event.scale;
|
||||||
|
}
|
||||||
|
|
||||||
onRotate(event: HammerInput): void { this.rotateAngle = event.rotation; }
|
onRotate(event: HammerInput): void {
|
||||||
|
this.rotateAngle = event.rotation;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [GesturesCmp], bootstrap: [GesturesCmp], imports: [BrowserModule]})
|
@NgModule({declarations: [GesturesCmp], bootstrap: [GesturesCmp], imports: [BrowserModule]})
|
||||||
|
@ -48,9 +48,13 @@ export class RedDec {
|
|||||||
export class HelloCmp {
|
export class HelloCmp {
|
||||||
greeting: string;
|
greeting: string;
|
||||||
|
|
||||||
constructor(service: GreetingService) { this.greeting = service.greeting; }
|
constructor(service: GreetingService) {
|
||||||
|
this.greeting = service.greeting;
|
||||||
|
}
|
||||||
|
|
||||||
changeGreeting(): void { this.greeting = 'howdy'; }
|
changeGreeting(): void {
|
||||||
|
this.greeting = 'howdy';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]})
|
@NgModule({declarations: [HelloCmp, RedDec], bootstrap: [HelloCmp], imports: [BrowserModule]})
|
||||||
|
@ -36,7 +36,9 @@ export class KeyEventsApp {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
resetShiftEnter(): void { this.shiftEnter = false; }
|
resetShiftEnter(): void {
|
||||||
|
this.shiftEnter = false;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get a more readable version of current pressed keys.
|
* Get a more readable version of current pressed keys.
|
||||||
|
@ -52,7 +52,9 @@ export class ShowError {
|
|||||||
controlPath: string;
|
controlPath: string;
|
||||||
errorTypes: string[];
|
errorTypes: string[];
|
||||||
|
|
||||||
constructor(@Host() formDir: FormGroupDirective) { this.formDir = formDir; }
|
constructor(@Host() formDir: FormGroupDirective) {
|
||||||
|
this.formDir = formDir;
|
||||||
|
}
|
||||||
|
|
||||||
get errorMessage(): string {
|
get errorMessage(): string {
|
||||||
const form: FormGroup = this.formDir.form;
|
const form: FormGroup = this.formDir.form;
|
||||||
|
@ -23,7 +23,9 @@ class OrderItem {
|
|||||||
public orderItemId: number, public orderId: number, public productName: string,
|
public orderItemId: number, public orderId: number, public productName: string,
|
||||||
public qty: number, public unitPrice: number) {}
|
public qty: number, public unitPrice: number) {}
|
||||||
|
|
||||||
get total(): number { return this.qty * this.unitPrice; }
|
get total(): number {
|
||||||
|
return this.qty * this.unitPrice;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Order {
|
class Order {
|
||||||
@ -31,8 +33,12 @@ class Order {
|
|||||||
public orderId: number, public customerName: string, public limit: number,
|
public orderId: number, public customerName: string, public limit: number,
|
||||||
private _dataService: DataService) {}
|
private _dataService: DataService) {}
|
||||||
|
|
||||||
get items(): OrderItem[] { return this._dataService.itemsFor(this); }
|
get items(): OrderItem[] {
|
||||||
get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b, 0); }
|
return this._dataService.itemsFor(this);
|
||||||
|
}
|
||||||
|
get total(): number {
|
||||||
|
return this.items.map(i => i.total).reduce((a, b) => a + b, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -69,7 +75,9 @@ export class DataService {
|
|||||||
this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
|
this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteItem(item: OrderItem): void { this.orderItems.splice(this.orderItems.indexOf(item), 1); }
|
deleteItem(item: OrderItem): void {
|
||||||
|
this.orderItems.splice(this.orderItems.indexOf(item), 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -107,8 +115,12 @@ export class DataService {
|
|||||||
export class OrderListComponent {
|
export class OrderListComponent {
|
||||||
orders: Order[];
|
orders: Order[];
|
||||||
|
|
||||||
constructor(private _service: DataService) { this.orders = _service.orders; }
|
constructor(private _service: DataService) {
|
||||||
select(order: Order): void { this._service.currentOrder = order; }
|
this.orders = _service.orders;
|
||||||
|
}
|
||||||
|
select(order: Order): void {
|
||||||
|
this._service.currentOrder = order;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -141,7 +153,9 @@ export class OrderItemComponent {
|
|||||||
@Input() item: OrderItem;
|
@Input() item: OrderItem;
|
||||||
@Output() delete = new EventEmitter();
|
@Output() delete = new EventEmitter();
|
||||||
|
|
||||||
onDelete(): void { this.delete.emit(this.item); }
|
onDelete(): void {
|
||||||
|
this.delete.emit(this.item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -176,11 +190,17 @@ export class OrderItemComponent {
|
|||||||
export class OrderDetailsComponent {
|
export class OrderDetailsComponent {
|
||||||
constructor(private _service: DataService) {}
|
constructor(private _service: DataService) {}
|
||||||
|
|
||||||
get order(): Order { return this._service.currentOrder; }
|
get order(): Order {
|
||||||
|
return this._service.currentOrder;
|
||||||
|
}
|
||||||
|
|
||||||
deleteItem(item: OrderItem): void { this._service.deleteItem(item); }
|
deleteItem(item: OrderItem): void {
|
||||||
|
this._service.deleteItem(item);
|
||||||
|
}
|
||||||
|
|
||||||
addItem(): void { this._service.addItemForOrder(this.order); }
|
addItem(): void {
|
||||||
|
this._service.addItemForOrder(this.order);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -35,9 +35,15 @@ class Person {
|
|||||||
this.personId = _nextId++;
|
this.personId = _nextId++;
|
||||||
}
|
}
|
||||||
|
|
||||||
get age(): number { return 2015 - this.yearOfBirth; }
|
get age(): number {
|
||||||
get fullName(): string { return `${this.firstName} ${this.lastName}`; }
|
return 2015 - this.yearOfBirth;
|
||||||
get friendNames(): string { return this.friends.map(f => f.fullName).join(', '); }
|
}
|
||||||
|
get fullName(): string {
|
||||||
|
return `${this.firstName} ${this.lastName}`;
|
||||||
|
}
|
||||||
|
get friendNames(): string {
|
||||||
|
return this.friends.map(f => f.fullName).join(', ');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -106,7 +112,9 @@ export class DataService {
|
|||||||
})
|
})
|
||||||
export class FullNameComponent {
|
export class FullNameComponent {
|
||||||
constructor(private _service: DataService) {}
|
constructor(private _service: DataService) {}
|
||||||
get person(): Person { return this._service.currentPerson; }
|
get person(): Person {
|
||||||
|
return this._service.currentPerson;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -158,7 +166,9 @@ export class FullNameComponent {
|
|||||||
})
|
})
|
||||||
export class PersonsDetailComponent {
|
export class PersonsDetailComponent {
|
||||||
constructor(private _service: DataService) {}
|
constructor(private _service: DataService) {}
|
||||||
get person(): Person { return this._service.currentPerson; }
|
get person(): Person {
|
||||||
|
return this._service.currentPerson;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -179,9 +189,13 @@ export class PersonsDetailComponent {
|
|||||||
export class PersonsComponent {
|
export class PersonsComponent {
|
||||||
persons: Person[];
|
persons: Person[];
|
||||||
|
|
||||||
constructor(private _service: DataService) { this.persons = _service.persons; }
|
constructor(private _service: DataService) {
|
||||||
|
this.persons = _service.persons;
|
||||||
|
}
|
||||||
|
|
||||||
select(person: Person): void { this._service.currentPerson = person; }
|
select(person: Person): void {
|
||||||
|
this._service.currentPerson = person;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -199,8 +213,12 @@ export class PersonsComponent {
|
|||||||
export class PersonManagementApplication {
|
export class PersonManagementApplication {
|
||||||
mode: string;
|
mode: string;
|
||||||
|
|
||||||
switchToEditName(): void { this.mode = 'editName'; }
|
switchToEditName(): void {
|
||||||
switchToPersonList(): void { this.mode = 'personList'; }
|
this.mode = 'editName';
|
||||||
|
}
|
||||||
|
switchToPersonList(): void {
|
||||||
|
this.mode = 'personList';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -29,7 +29,8 @@ export class InboxRecord {
|
|||||||
email: string,
|
email: string,
|
||||||
firstName: string,
|
firstName: string,
|
||||||
lastName: string,
|
lastName: string,
|
||||||
date: string, draft?: boolean
|
date: string,
|
||||||
|
draft?: boolean
|
||||||
} = null) {
|
} = null) {
|
||||||
if (data) {
|
if (data) {
|
||||||
this.setData(data);
|
this.setData(data);
|
||||||
@ -43,7 +44,8 @@ export class InboxRecord {
|
|||||||
email: string,
|
email: string,
|
||||||
firstName: string,
|
firstName: string,
|
||||||
lastName: string,
|
lastName: string,
|
||||||
date: string, draft?: boolean
|
date: string,
|
||||||
|
draft?: boolean
|
||||||
}) {
|
}) {
|
||||||
this.id = record.id;
|
this.id = record.id;
|
||||||
this.subject = record.subject;
|
this.subject = record.subject;
|
||||||
|
@ -17,8 +17,11 @@ export class InboxDetailCmp {
|
|||||||
private ready: boolean = false;
|
private ready: boolean = false;
|
||||||
|
|
||||||
constructor(db: DbService, route: ActivatedRoute) {
|
constructor(db: DbService, route: ActivatedRoute) {
|
||||||
route.paramMap.forEach(
|
route.paramMap.forEach(p => {
|
||||||
p => { db.email(p.get('id')).then((data) => { this.record.setData(data); }); });
|
db.email(p.get('id')).then((data) => {
|
||||||
|
this.record.setData(data);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,9 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
|||||||
<button class="errorButton" (click)="createError()">create error</button>`
|
<button class="errorButton" (click)="createError()">create error</button>`
|
||||||
})
|
})
|
||||||
export class ErrorComponent {
|
export class ErrorComponent {
|
||||||
createError(): void { throw new Error('Sourcemap test'); }
|
createError(): void {
|
||||||
|
throw new Error('Sourcemap test');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]})
|
@NgModule({declarations: [ErrorComponent], bootstrap: [ErrorComponent], imports: [BrowserModule]})
|
||||||
|
@ -78,7 +78,9 @@ export class ShowError {
|
|||||||
controlPath: string;
|
controlPath: string;
|
||||||
errorTypes: string[];
|
errorTypes: string[];
|
||||||
|
|
||||||
constructor(@Host() formDir: NgForm) { this.formDir = formDir; }
|
constructor(@Host() formDir: NgForm) {
|
||||||
|
this.formDir = formDir;
|
||||||
|
}
|
||||||
|
|
||||||
get errorMessage(): string {
|
get errorMessage(): string {
|
||||||
const form: FormGroup = this.formDir.form;
|
const form: FormGroup = this.formDir.form;
|
||||||
|
@ -14,14 +14,18 @@ export abstract class KeyModel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class Todo extends KeyModel {
|
export class Todo extends KeyModel {
|
||||||
constructor(key: number, public title: string, public completed: boolean) { super(key); }
|
constructor(key: number, public title: string, public completed: boolean) {
|
||||||
|
super(key);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class TodoFactory {
|
export class TodoFactory {
|
||||||
private _uid: number = 0;
|
private _uid: number = 0;
|
||||||
|
|
||||||
nextUid(): number { return ++this._uid; }
|
nextUid(): number {
|
||||||
|
return ++this._uid;
|
||||||
|
}
|
||||||
|
|
||||||
create(title: string, isCompleted: boolean): Todo {
|
create(title: string, isCompleted: boolean): Todo {
|
||||||
return new Todo(this.nextUid(), title, isCompleted);
|
return new Todo(this.nextUid(), title, isCompleted);
|
||||||
@ -33,9 +37,13 @@ export class TodoFactory {
|
|||||||
export class Store<T extends KeyModel> {
|
export class Store<T extends KeyModel> {
|
||||||
list: T[] = [];
|
list: T[] = [];
|
||||||
|
|
||||||
add(record: T): void { this.list.push(record); }
|
add(record: T): void {
|
||||||
|
this.list.push(record);
|
||||||
|
}
|
||||||
|
|
||||||
remove(record: T): void { this.removeBy((item) => item === record); }
|
remove(record: T): void {
|
||||||
|
this.removeBy((item) => item === record);
|
||||||
|
}
|
||||||
|
|
||||||
removeBy(callback: (record: T) => boolean): void {
|
removeBy(callback: (record: T) => boolean): void {
|
||||||
this.list = this.list.filter((record) => !callback(record));
|
this.list = this.list.filter((record) => !callback(record));
|
||||||
|
@ -23,7 +23,9 @@ export class TodoApp {
|
|||||||
inputElement.value = '';
|
inputElement.value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
editTodo(todo: Todo): void { this.todoEdit = todo; }
|
editTodo(todo: Todo): void {
|
||||||
|
this.todoEdit = todo;
|
||||||
|
}
|
||||||
|
|
||||||
doneEditing($event: KeyboardEvent, todo: Todo): void {
|
doneEditing($event: KeyboardEvent, todo: Todo): void {
|
||||||
const which = $event.which;
|
const which = $event.which;
|
||||||
@ -37,18 +39,28 @@ export class TodoApp {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
|
addTodo(newTitle: string): void {
|
||||||
|
this.todoStore.add(this.factory.create(newTitle, false));
|
||||||
|
}
|
||||||
|
|
||||||
completeMe(todo: Todo): void { todo.completed = !todo.completed; }
|
completeMe(todo: Todo): void {
|
||||||
|
todo.completed = !todo.completed;
|
||||||
|
}
|
||||||
|
|
||||||
deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
|
deleteMe(todo: Todo): void {
|
||||||
|
this.todoStore.remove(todo);
|
||||||
|
}
|
||||||
|
|
||||||
toggleAll($event: MouseEvent): void {
|
toggleAll($event: MouseEvent): void {
|
||||||
const isComplete = ($event.target as HTMLInputElement).checked;
|
const isComplete = ($event.target as HTMLInputElement).checked;
|
||||||
this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
|
this.todoStore.list.forEach((todo: Todo) => {
|
||||||
|
todo.completed = isComplete;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); }
|
clearCompleted(): void {
|
||||||
|
this.todoStore.removeBy((todo: Todo) => todo.completed);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]})
|
@NgModule({declarations: [TodoApp], bootstrap: [TodoApp], imports: [BrowserModule]})
|
||||||
|
@ -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 {Component, EventEmitter, Input, NgModule, Output, forwardRef} from '@angular/core';
|
import {Component, EventEmitter, forwardRef, Input, NgModule, Output} from '@angular/core';
|
||||||
import {BrowserModule} from '@angular/platform-browser';
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
import {UpgradeAdapter} from '@angular/upgrade';
|
import {UpgradeAdapter} from '@angular/upgrade';
|
||||||
|
|
||||||
@ -30,7 +30,9 @@ const styles = [`
|
|||||||
const adapter = new UpgradeAdapter(forwardRef(() => Ng2AppModule));
|
const adapter = new UpgradeAdapter(forwardRef(() => Ng2AppModule));
|
||||||
const ng1module = angular.module('myExample', []);
|
const ng1module = angular.module('myExample', []);
|
||||||
|
|
||||||
ng1module.controller('Index', function($scope: any) { $scope.name = 'World'; });
|
ng1module.controller('Index', function($scope: any) {
|
||||||
|
$scope.name = 'World';
|
||||||
|
});
|
||||||
|
|
||||||
ng1module.directive('ng1User', function() {
|
ng1module.directive('ng1User', function() {
|
||||||
return {
|
return {
|
||||||
|
@ -26,7 +26,11 @@ export class InputCmp {
|
|||||||
inputVal = '';
|
inputVal = '';
|
||||||
textareaVal = '';
|
textareaVal = '';
|
||||||
|
|
||||||
inputChanged(e: Event) { this.inputVal = (e.target as HTMLInputElement).value; }
|
inputChanged(e: Event) {
|
||||||
|
this.inputVal = (e.target as HTMLInputElement).value;
|
||||||
textAreaChanged(e: Event) { this.textareaVal = (e.target as HTMLTextAreaElement).value; }
|
}
|
||||||
|
|
||||||
|
textAreaChanged(e: Event) {
|
||||||
|
this.textareaVal = (e.target as HTMLTextAreaElement).value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -49,9 +49,15 @@ export class HelloCmp {
|
|||||||
greeting: string;
|
greeting: string;
|
||||||
lastKey: string = '(none)';
|
lastKey: string = '(none)';
|
||||||
|
|
||||||
constructor(service: GreetingService) { this.greeting = service.greeting; }
|
constructor(service: GreetingService) {
|
||||||
|
this.greeting = service.greeting;
|
||||||
changeGreeting(): void { this.greeting = 'howdy'; }
|
}
|
||||||
|
|
||||||
onKeyDown(event: KeyboardEvent): void { this.lastKey = String.fromCharCode(event.keyCode); }
|
changeGreeting(): void {
|
||||||
|
this.greeting = 'howdy';
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown(event: KeyboardEvent): void {
|
||||||
|
this.lastKey = String.fromCharCode(event.keyCode);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {PlatformRef} from '@angular/core';
|
import {PlatformRef} from '@angular/core';
|
||||||
import {ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments, bootstrapWorkerUi} from '@angular/platform-webworker';
|
import {bootstrapWorkerUi, ClientMessageBrokerFactory, FnArg, SerializerTypes, UiArguments} from '@angular/platform-webworker';
|
||||||
|
|
||||||
const ECHO_CHANNEL = 'ECHO';
|
const ECHO_CHANNEL = 'ECHO';
|
||||||
|
|
||||||
|
@ -19,5 +19,7 @@ export class App {
|
|||||||
'echo', [SerializerTypes.PRIMITIVE], this._echo, SerializerTypes.PRIMITIVE);
|
'echo', [SerializerTypes.PRIMITIVE], this._echo, SerializerTypes.PRIMITIVE);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _echo(val: string) { return new Promise((res) => res(val)); }
|
private _echo(val: string) {
|
||||||
|
return new Promise((res) => res(val));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,6 @@
|
|||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
|
import {bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS} from '@angular/platform-webworker';
|
||||||
|
|
||||||
bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
|
bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
|
||||||
|
@ -36,11 +36,17 @@ export class TodoApp {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
editTodo(todo: Todo): void { this.todoEdit = todo; }
|
editTodo(todo: Todo): void {
|
||||||
|
this.todoEdit = todo;
|
||||||
|
}
|
||||||
|
|
||||||
addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
|
addTodo(newTitle: string): void {
|
||||||
|
this.todoStore.add(this.factory.create(newTitle, false));
|
||||||
|
}
|
||||||
|
|
||||||
completeMe(todo: Todo): void { todo.completed = !todo.completed; }
|
completeMe(todo: Todo): void {
|
||||||
|
todo.completed = !todo.completed;
|
||||||
|
}
|
||||||
|
|
||||||
toggleCompleted(): void {
|
toggleCompleted(): void {
|
||||||
this.hideActive = !this.hideActive;
|
this.hideActive = !this.hideActive;
|
||||||
@ -57,12 +63,18 @@ export class TodoApp {
|
|||||||
this.hideActive = false;
|
this.hideActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
|
deleteMe(todo: Todo): void {
|
||||||
|
this.todoStore.remove(todo);
|
||||||
|
}
|
||||||
|
|
||||||
toggleAll($event: MouseEvent): void {
|
toggleAll($event: MouseEvent): void {
|
||||||
this.isComplete = !this.isComplete;
|
this.isComplete = !this.isComplete;
|
||||||
this.todoStore.list.forEach((todo: Todo) => { todo.completed = this.isComplete; });
|
this.todoStore.list.forEach((todo: Todo) => {
|
||||||
|
todo.completed = this.isComplete;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
clearCompleted(): void { this.todoStore.removeBy((todo: Todo) => todo.completed); }
|
clearCompleted(): void {
|
||||||
|
this.todoStore.removeBy((todo: Todo) => todo.completed);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,7 +25,9 @@ export class Todo extends KeyModel {
|
|||||||
export class TodoFactory {
|
export class TodoFactory {
|
||||||
private _uid: number = 0;
|
private _uid: number = 0;
|
||||||
|
|
||||||
nextUid(): number { return ++this._uid; }
|
nextUid(): number {
|
||||||
|
return ++this._uid;
|
||||||
|
}
|
||||||
|
|
||||||
create(title: string, isCompleted: boolean): Todo {
|
create(title: string, isCompleted: boolean): Todo {
|
||||||
return new Todo(this.nextUid(), title, isCompleted);
|
return new Todo(this.nextUid(), title, isCompleted);
|
||||||
@ -37,9 +39,13 @@ export class TodoFactory {
|
|||||||
export class Store<T extends KeyModel> {
|
export class Store<T extends KeyModel> {
|
||||||
list: T[] = [];
|
list: T[] = [];
|
||||||
|
|
||||||
add(record: T): void { this.list.push(record); }
|
add(record: T): void {
|
||||||
|
this.list.push(record);
|
||||||
|
}
|
||||||
|
|
||||||
remove(record: T): void { this.removeBy((item) => item === record); }
|
remove(record: T): void {
|
||||||
|
this.removeBy((item) => item === record);
|
||||||
|
}
|
||||||
|
|
||||||
removeBy(callback: (record: T) => boolean): void {
|
removeBy(callback: (record: T) => boolean): void {
|
||||||
this.list = this.list.filter((record) => !callback(record));
|
this.list = this.list.filter((record) => !callback(record));
|
||||||
|
@ -26,7 +26,9 @@ import {Zippy} from './app/zippy';
|
|||||||
export class ZippyApp {
|
export class ZippyApp {
|
||||||
logs: string[] = [];
|
logs: string[] = [];
|
||||||
|
|
||||||
pushLog(log: string) { this.logs.push(log); }
|
pushLog(log: string) {
|
||||||
|
this.logs.push(log);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@NgModule({declarations: [ZippyApp, Zippy], bootstrap: [ZippyApp], imports: [BrowserModule]})
|
@NgModule({declarations: [ZippyApp, Zippy], bootstrap: [ZippyApp], imports: [BrowserModule]})
|
||||||
|
@ -22,7 +22,7 @@ export class Animation {
|
|||||||
const errors: any[] = [];
|
const errors: any[] = [];
|
||||||
const ast = buildAnimationAst(_driver, input, errors);
|
const ast = buildAnimationAst(_driver, input, errors);
|
||||||
if (errors.length) {
|
if (errors.length) {
|
||||||
const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
|
const errorMessage = `animation validation failed:\n${errors.join('\n')}`;
|
||||||
throw new Error(errorMessage);
|
throw new Error(errorMessage);
|
||||||
}
|
}
|
||||||
this._animationAst = ast;
|
this._animationAst = ast;
|
||||||
@ -42,7 +42,7 @@ export class Animation {
|
|||||||
this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest,
|
this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest,
|
||||||
options, subInstructions, errors);
|
options, subInstructions, errors);
|
||||||
if (errors.length) {
|
if (errors.length) {
|
||||||
const errorMessage = `animation building failed:\n${errors.join("\n")}`;
|
const errorMessage = `animation building failed:\n${errors.join('\n')}`;
|
||||||
throw new Error(errorMessage);
|
throw new Error(errorMessage);
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
|
@ -74,7 +74,9 @@ export interface StyleAst extends Ast<AnimationMetadataType.Style> {
|
|||||||
isEmptyStep?: boolean;
|
isEmptyStep?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KeyframesAst extends Ast<AnimationMetadataType.Keyframes> { styles: StyleAst[]; }
|
export interface KeyframesAst extends Ast<AnimationMetadataType.Keyframes> {
|
||||||
|
styles: StyleAst[];
|
||||||
|
}
|
||||||
|
|
||||||
export interface ReferenceAst extends Ast<AnimationMetadataType.Reference> {
|
export interface ReferenceAst extends Ast<AnimationMetadataType.Reference> {
|
||||||
animation: Ast<AnimationMetadataType>;
|
animation: Ast<AnimationMetadataType>;
|
||||||
|
@ -5,11 +5,11 @@
|
|||||||
* 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 {AUTO_STYLE, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, style, ɵStyleData} from '@angular/animations';
|
import {AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, AUTO_STYLE, style, ɵStyleData} from '@angular/animations';
|
||||||
|
|
||||||
import {AnimationDriver} from '../render/animation_driver';
|
import {AnimationDriver} from '../render/animation_driver';
|
||||||
import {getOrSetAsInMap} from '../render/shared';
|
import {getOrSetAsInMap} from '../render/shared';
|
||||||
import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, SUBSTITUTION_EXPR_START, copyObj, extractStyleParams, iteratorToArray, normalizeAnimationEntry, resolveTiming, validateStyleParams, visitDslNode} from '../util';
|
import {copyObj, ENTER_SELECTOR, extractStyleParams, iteratorToArray, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, normalizeAnimationEntry, resolveTiming, SUBSTITUTION_EXPR_START, validateStyleParams, visitDslNode} from '../util';
|
||||||
|
|
||||||
import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
|
import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
|
||||||
import {AnimationDslVisitor} from './animation_dsl_visitor';
|
import {AnimationDslVisitor} from './animation_dsl_visitor';
|
||||||
@ -114,7 +114,11 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
type: AnimationMetadataType.Trigger,
|
type: AnimationMetadataType.Trigger,
|
||||||
name: metadata.name, states, transitions, queryCount, depCount,
|
name: metadata.name,
|
||||||
|
states,
|
||||||
|
transitions,
|
||||||
|
queryCount,
|
||||||
|
depCount,
|
||||||
options: null
|
options: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -139,8 +143,10 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
});
|
});
|
||||||
if (missingSubs.size) {
|
if (missingSubs.size) {
|
||||||
const missingSubsArr = iteratorToArray(missingSubs.values());
|
const missingSubsArr = iteratorToArray(missingSubs.values());
|
||||||
context.errors.push(
|
context.errors.push(`state("${
|
||||||
`state("${metadata.name}", ...) must define default values for all the following style substitutions: ${missingSubsArr.join(', ')}`);
|
metadata
|
||||||
|
.name}", ...) must define default values for all the following style substitutions: ${
|
||||||
|
missingSubsArr.join(', ')}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -282,7 +288,8 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
type: AnimationMetadataType.Style,
|
type: AnimationMetadataType.Style,
|
||||||
styles,
|
styles,
|
||||||
easing: collectedEasing,
|
easing: collectedEasing,
|
||||||
offset: metadata.offset, containsDynamicStyles,
|
offset: metadata.offset,
|
||||||
|
containsDynamicStyles,
|
||||||
options: null
|
options: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -300,8 +307,8 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
|
|
||||||
Object.keys(tuple).forEach(prop => {
|
Object.keys(tuple).forEach(prop => {
|
||||||
if (!this._driver.validateStyleProperty(prop)) {
|
if (!this._driver.validateStyleProperty(prop)) {
|
||||||
context.errors.push(
|
context.errors.push(`The provided animation property "${
|
||||||
`The provided animation property "${prop}" is not a supported CSS property for animations`);
|
prop}" is not a supported CSS property for animations`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -311,8 +318,11 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
if (collectedEntry) {
|
if (collectedEntry) {
|
||||||
if (startTime != endTime && startTime >= collectedEntry.startTime &&
|
if (startTime != endTime && startTime >= collectedEntry.startTime &&
|
||||||
endTime <= collectedEntry.endTime) {
|
endTime <= collectedEntry.endTime) {
|
||||||
context.errors.push(
|
context.errors.push(`The CSS property "${prop}" that exists between the times of "${
|
||||||
`The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry.endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
|
collectedEntry.startTime}ms" and "${
|
||||||
|
collectedEntry
|
||||||
|
.endTime}ms" is also being animated in a parallel animation between the times of "${
|
||||||
|
startTime}ms" and "${endTime}ms"`);
|
||||||
updateCollectedStyle = false;
|
updateCollectedStyle = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -445,7 +455,9 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
type: AnimationMetadataType.Query,
|
type: AnimationMetadataType.Query,
|
||||||
selector,
|
selector,
|
||||||
limit: options.limit || 0,
|
limit: options.limit || 0,
|
||||||
optional: !!options.optional, includeSelf, animation,
|
optional: !!options.optional,
|
||||||
|
includeSelf,
|
||||||
|
animation,
|
||||||
originalSelector: metadata.selector,
|
originalSelector: metadata.selector,
|
||||||
options: normalizeAnimationOptions(metadata.options)
|
options: normalizeAnimationOptions(metadata.options)
|
||||||
};
|
};
|
||||||
@ -462,7 +474,8 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
type: AnimationMetadataType.Stagger,
|
type: AnimationMetadataType.Stagger,
|
||||||
animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context), timings,
|
animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context),
|
||||||
|
timings,
|
||||||
options: null
|
options: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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 {AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationMetadataType, AnimationOptions, AnimationQueryOptions, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
|
import {AnimateChildOptions, AnimateTimings, AnimationMetadataType, AnimationOptions, AnimationQueryOptions, AUTO_STYLE, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
|
||||||
|
|
||||||
import {AnimationDriver} from '../render/animation_driver';
|
import {AnimationDriver} from '../render/animation_driver';
|
||||||
import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue, visitDslNode} from '../util';
|
import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue, visitDslNode} from '../util';
|
||||||
@ -351,7 +351,8 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
|
|||||||
const options = (ast.options || {}) as AnimationQueryOptions;
|
const options = (ast.options || {}) as AnimationQueryOptions;
|
||||||
const delay = options.delay ? resolveTimingValue(options.delay) : 0;
|
const delay = options.delay ? resolveTimingValue(options.delay) : 0;
|
||||||
|
|
||||||
if (delay && (context.previousNode.type === AnimationMetadataType.Style ||
|
if (delay &&
|
||||||
|
(context.previousNode.type === AnimationMetadataType.Style ||
|
||||||
(startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) {
|
(startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) {
|
||||||
context.currentTimeline.snapshotCurrentStyles();
|
context.currentTimeline.snapshotCurrentStyles();
|
||||||
context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
|
context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
|
||||||
@ -365,7 +366,6 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
|
|||||||
context.currentQueryTotal = elms.length;
|
context.currentQueryTotal = elms.length;
|
||||||
let sameElementTimeline: TimelineBuilder|null = null;
|
let sameElementTimeline: TimelineBuilder|null = null;
|
||||||
elms.forEach((element, i) => {
|
elms.forEach((element, i) => {
|
||||||
|
|
||||||
context.currentQueryIndex = i;
|
context.currentQueryIndex = i;
|
||||||
const innerContext = context.createSubContext(ast.options, element);
|
const innerContext = context.createSubContext(ast.options, element);
|
||||||
if (delay) {
|
if (delay) {
|
||||||
@ -460,7 +460,9 @@ export class AnimationTimelineContext {
|
|||||||
timelines.push(this.currentTimeline);
|
timelines.push(this.currentTimeline);
|
||||||
}
|
}
|
||||||
|
|
||||||
get params() { return this.options.params; }
|
get params() {
|
||||||
|
return this.options.params;
|
||||||
|
}
|
||||||
|
|
||||||
updateOptions(options: AnimationOptions|null, skipIfExists?: boolean) {
|
updateOptions(options: AnimationOptions|null, skipIfExists?: boolean) {
|
||||||
if (!options) return;
|
if (!options) return;
|
||||||
@ -498,7 +500,9 @@ export class AnimationTimelineContext {
|
|||||||
const oldParams = this.options.params;
|
const oldParams = this.options.params;
|
||||||
if (oldParams) {
|
if (oldParams) {
|
||||||
const params: {[name: string]: any} = options['params'] = {};
|
const params: {[name: string]: any} = options['params'] = {};
|
||||||
Object.keys(oldParams).forEach(name => { params[name] = oldParams[name]; });
|
Object.keys(oldParams).forEach(name => {
|
||||||
|
params[name] = oldParams[name];
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return options;
|
return options;
|
||||||
@ -576,8 +580,8 @@ export class AnimationTimelineContext {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!optional && results.length == 0) {
|
if (!optional && results.length == 0) {
|
||||||
errors.push(
|
errors.push(`\`query("${originalSelector}")\` returned zero elements. (Use \`query("${
|
||||||
`\`query("${originalSelector}")\` returned zero elements. (Use \`query("${originalSelector}", { optional: true })\` if you wish to allow this.)`);
|
originalSelector}", { optional: true })\` if you wish to allow this.)`);
|
||||||
}
|
}
|
||||||
return results;
|
return results;
|
||||||
}
|
}
|
||||||
@ -625,9 +629,13 @@ export class TimelineBuilder {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getCurrentStyleProperties(): string[] { return Object.keys(this._currentKeyframe); }
|
getCurrentStyleProperties(): string[] {
|
||||||
|
return Object.keys(this._currentKeyframe);
|
||||||
|
}
|
||||||
|
|
||||||
get currentTime() { return this.startTime + this.duration; }
|
get currentTime() {
|
||||||
|
return this.startTime + this.duration;
|
||||||
|
}
|
||||||
|
|
||||||
delayNextStep(delay: number) {
|
delayNextStep(delay: number) {
|
||||||
// in the event that a style() step is placed right before a stagger()
|
// in the event that a style() step is placed right before a stagger()
|
||||||
@ -680,7 +688,9 @@ export class TimelineBuilder {
|
|||||||
this._styleSummary[prop] = {time: this.currentTime, value};
|
this._styleSummary[prop] = {time: this.currentTime, value};
|
||||||
}
|
}
|
||||||
|
|
||||||
allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
|
allowOnlyTimelineStyles() {
|
||||||
|
return this._currentEmptyStepKeyframe !== this._currentKeyframe;
|
||||||
|
}
|
||||||
|
|
||||||
applyEmptyStep(easing: string|null) {
|
applyEmptyStep(easing: string|null) {
|
||||||
if (easing) {
|
if (easing) {
|
||||||
@ -748,7 +758,9 @@ export class TimelineBuilder {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getFinalKeyframe() { return this._keyframes.get(this.duration); }
|
getFinalKeyframe() {
|
||||||
|
return this._keyframes.get(this.duration);
|
||||||
|
}
|
||||||
|
|
||||||
get properties() {
|
get properties() {
|
||||||
const properties: string[] = [];
|
const properties: string[] = [];
|
||||||
@ -820,7 +832,9 @@ class SubTimelineBuilder extends TimelineBuilder {
|
|||||||
this.timings = {duration: timings.duration, delay: timings.delay, easing: timings.easing};
|
this.timings = {duration: timings.duration, delay: timings.delay, easing: timings.easing};
|
||||||
}
|
}
|
||||||
|
|
||||||
containsAnimation(): boolean { return this.keyframes.length > 1; }
|
containsAnimation(): boolean {
|
||||||
|
return this.keyframes.length > 1;
|
||||||
|
}
|
||||||
|
|
||||||
buildKeyframes(): AnimationTimelineInstruction {
|
buildKeyframes(): AnimationTimelineInstruction {
|
||||||
let keyframes = this.keyframes;
|
let keyframes = this.keyframes;
|
||||||
@ -889,7 +903,9 @@ function flattenStyles(input: (ɵStyleData | string)[], allStyles: ɵStyleData)
|
|||||||
input.forEach(token => {
|
input.forEach(token => {
|
||||||
if (token === '*') {
|
if (token === '*') {
|
||||||
allProperties = allProperties || Object.keys(allStyles);
|
allProperties = allProperties || Object.keys(allStyles);
|
||||||
allProperties.forEach(prop => { styles[prop] = AUTO_STYLE; });
|
allProperties.forEach(prop => {
|
||||||
|
styles[prop] = AUTO_STYLE;
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
copyStyles(token as ɵStyleData, false, styles);
|
copyStyles(token as ɵStyleData, false, styles);
|
||||||
}
|
}
|
||||||
|
@ -33,6 +33,8 @@ export function createTimelineInstruction(
|
|||||||
postStyleProps,
|
postStyleProps,
|
||||||
duration,
|
duration,
|
||||||
delay,
|
delay,
|
||||||
totalTime: duration + delay, easing, subTimeline
|
totalTime: duration + delay,
|
||||||
|
easing,
|
||||||
|
subTimeline
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -55,13 +55,16 @@ export class AnimationTransitionFactory {
|
|||||||
|
|
||||||
const animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
|
const animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
|
||||||
|
|
||||||
const timelines = skipAstBuild ? [] : buildAnimationTimelines(
|
const timelines = skipAstBuild ?
|
||||||
driver, element, this.ast.animation, enterClassName,
|
[] :
|
||||||
leaveClassName, currentStateStyles, nextStateStyles,
|
buildAnimationTimelines(
|
||||||
animationOptions, subInstructions, errors);
|
driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles,
|
||||||
|
nextStateStyles, animationOptions, subInstructions, errors);
|
||||||
|
|
||||||
let totalTime = 0;
|
let totalTime = 0;
|
||||||
timelines.forEach(tl => { totalTime = Math.max(tl.duration + tl.delay, totalTime); });
|
timelines.forEach(tl => {
|
||||||
|
totalTime = Math.max(tl.duration + tl.delay, totalTime);
|
||||||
|
});
|
||||||
|
|
||||||
if (errors.length) {
|
if (errors.length) {
|
||||||
return createTransitionInstruction(
|
return createTransitionInstruction(
|
||||||
|
@ -45,7 +45,9 @@ export class AnimationTrigger {
|
|||||||
this.fallbackTransition = createFallbackTransition(name, this.states);
|
this.fallbackTransition = createFallbackTransition(name, this.states);
|
||||||
}
|
}
|
||||||
|
|
||||||
get containsQueries() { return this.ast.queryCount > 0; }
|
get containsQueries() {
|
||||||
|
return this.ast.queryCount > 0;
|
||||||
|
}
|
||||||
|
|
||||||
matchTransition(currentState: any, nextState: any, element: any, params: {[key: string]: any}):
|
matchTransition(currentState: any, nextState: any, element: any, params: {[key: string]: any}):
|
||||||
AnimationTransitionFactory|null {
|
AnimationTransitionFactory|null {
|
||||||
|
@ -28,7 +28,11 @@ export class ElementInstructionMap {
|
|||||||
existingInstructions.push(...instructions);
|
existingInstructions.push(...instructions);
|
||||||
}
|
}
|
||||||
|
|
||||||
has(element: any): boolean { return this._map.has(element); }
|
has(element: any): boolean {
|
||||||
|
return this._map.has(element);
|
||||||
clear() { this._map.clear(); }
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this._map.clear();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,9 @@ export abstract class AnimationStyleNormalizer {
|
|||||||
* @publicApi
|
* @publicApi
|
||||||
*/
|
*/
|
||||||
export class NoopAnimationStyleNormalizer {
|
export class NoopAnimationStyleNormalizer {
|
||||||
normalizePropertyName(propertyName: string, errors: string[]): string { return propertyName; }
|
normalizePropertyName(propertyName: string, errors: string[]): string {
|
||||||
|
return propertyName;
|
||||||
|
}
|
||||||
|
|
||||||
normalizeStyleValue(
|
normalizeStyleValue(
|
||||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||||
|
@ -13,6 +13,6 @@ export {AnimationEngine as ɵAnimationEngine} from './render/animation_engine_ne
|
|||||||
export {CssKeyframesDriver as ɵCssKeyframesDriver} from './render/css_keyframes/css_keyframes_driver';
|
export {CssKeyframesDriver as ɵCssKeyframesDriver} from './render/css_keyframes/css_keyframes_driver';
|
||||||
export {CssKeyframesPlayer as ɵCssKeyframesPlayer} from './render/css_keyframes/css_keyframes_player';
|
export {CssKeyframesPlayer as ɵCssKeyframesPlayer} from './render/css_keyframes/css_keyframes_player';
|
||||||
export {containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, matchesElement as ɵmatchesElement, validateStyleProperty as ɵvalidateStyleProperty} from './render/shared';
|
export {containsElement as ɵcontainsElement, invokeQuery as ɵinvokeQuery, matchesElement as ɵmatchesElement, validateStyleProperty as ɵvalidateStyleProperty} from './render/shared';
|
||||||
export {WebAnimationsDriver as ɵWebAnimationsDriver, supportsWebAnimations as ɵsupportsWebAnimations} from './render/web_animations/web_animations_driver';
|
export {supportsWebAnimations as ɵsupportsWebAnimations, WebAnimationsDriver as ɵWebAnimationsDriver} from './render/web_animations/web_animations_driver';
|
||||||
export {WebAnimationsPlayer as ɵWebAnimationsPlayer} from './render/web_animations/web_animations_player';
|
export {WebAnimationsPlayer as ɵWebAnimationsPlayer} from './render/web_animations/web_animations_player';
|
||||||
export {allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge} from './util';
|
export {allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge} from './util';
|
||||||
|
@ -15,13 +15,17 @@ import {containsElement, invokeQuery, matchesElement, validateStyleProperty} fro
|
|||||||
*/
|
*/
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class NoopAnimationDriver implements AnimationDriver {
|
export class NoopAnimationDriver implements AnimationDriver {
|
||||||
validateStyleProperty(prop: string): boolean { return validateStyleProperty(prop); }
|
validateStyleProperty(prop: string): boolean {
|
||||||
|
return validateStyleProperty(prop);
|
||||||
|
}
|
||||||
|
|
||||||
matchesElement(element: any, selector: string): boolean {
|
matchesElement(element: any, selector: string): boolean {
|
||||||
return matchesElement(element, selector);
|
return matchesElement(element, selector);
|
||||||
}
|
}
|
||||||
|
|
||||||
containsElement(elm1: any, elm2: any): boolean { return containsElement(elm1, elm2); }
|
containsElement(elm1: any, elm2: any): boolean {
|
||||||
|
return containsElement(elm1, elm2);
|
||||||
|
}
|
||||||
|
|
||||||
query(element: any, selector: string, multi: boolean): any[] {
|
query(element: any, selector: string, multi: boolean): any[] {
|
||||||
return invokeQuery(element, selector, multi);
|
return invokeQuery(element, selector, multi);
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user