{
26 | let startTime: Date;
27 | const initialData: ChartData = {
28 | oneSecond: [{ clicksPerWindow: 0, timeElapsed: 0 }],
29 | fiveSeconds: [{ clicksPerWindow: 0, timeElapsed: 0 }],
30 | fifteenSeconds: [{ clicksPerWindow: 0, timeElapsed: 0 }],
31 | };
32 | return combineLatest([
33 | oneSecondWindow,
34 | fiveSecondWindow,
35 | fifteenSecondWindow,
36 | ]).pipe(
37 | tap(() => {
38 | if (!startTime) {
39 | startTime = new Date();
40 | }
41 | }),
42 | map(([one, five, fifteen]) => {
43 | const date = new Date();
44 | const timeElapsed = (date as any) - (startTime as any);
45 | return {
46 | one: { clicksPerWindow: one, timeElapsed },
47 | five: { clicksPerWindow: five, timeElapsed },
48 | fifteen: { clicksPerWindow: fifteen, timeElapsed },
49 | };
50 | }),
51 | scan(
52 | (acc, curr) => ({
53 | oneSecond: acc.oneSecond.concat([curr.one]),
54 | fiveSeconds: acc.fiveSeconds.concat([curr.five]),
55 | fifteenSeconds: acc.fifteenSeconds.concat([curr.fifteen]),
56 | }),
57 | initialData
58 | ),
59 | startWith(initialData)
60 | );
61 | }
62 |
63 | export function convertToFormattedData(
64 | chartData: SeriesDataPoint
65 | ): { x: number; y: number } {
66 | return {
67 | x: chartData.timeElapsed / 1000,
68 | y: chartData.clicksPerWindow,
69 | };
70 | }
71 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/click-counter/click-counter.component.html:
--------------------------------------------------------------------------------
1 | Click Me!
2 | Clicks in Last Second: {{ lastSecondCounter$ | async }}
3 | Clicks in Last 5 Seconds: {{ lastFiveSecondsCounter$ | async }}
4 | Clicks in Last 15 Seconds: {{ lastFifteenSecondsCounter$ | async }}
5 | Total Count: {{ clickCounter$ | async }}
6 | ;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ClickCounterComponent],
12 | }).compileComponents();
13 | });
14 |
15 | beforeEach(() => {
16 | fixture = TestBed.createComponent(ClickCounterComponent);
17 | component = fixture.componentInstance;
18 | fixture.detectChanges();
19 | });
20 |
21 | xit('should create', () => {
22 | expect(component).toBeTruthy();
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/click-counter/click-counter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
2 | import { fromEvent, Observable } from 'rxjs';
3 | import { scan, startWith } from 'rxjs/operators';
4 | import { ChartData, createChartData } from '../chart-data.function';
5 | import { windowedCount } from '../windowed-count.function';
6 |
7 | function createClickObservable(target: ElementRef): Observable {
8 | return fromEvent(target.nativeElement, 'click');
9 | }
10 |
11 | function count(incoming: Observable): Observable {
12 | return incoming.pipe(
13 | scan((acc) => acc + 1, 0),
14 | startWith(0)
15 | );
16 | }
17 |
18 | @Component({
19 | selector: 'reactive-code-animations-click-counter',
20 | templateUrl: './click-counter.component.html',
21 | styleUrls: ['./click-counter.component.scss'],
22 | })
23 | export class ClickCounterComponent implements OnInit {
24 | @ViewChild('button', { static: true }) button: ElementRef;
25 | private _buttonClicks$: Observable;
26 | clickCounter$: Observable;
27 | lastSecondCounter$: Observable;
28 | lastFiveSecondsCounter$: Observable;
29 | lastFifteenSecondsCounter$: Observable;
30 | chartData$: Observable;
31 |
32 | ngOnInit(): void {
33 | this._buttonClicks$ = createClickObservable(this.button);
34 | this.clickCounter$ = this._buttonClicks$.pipe(count);
35 | this.lastSecondCounter$ = this._buttonClicks$.pipe(windowedCount(1000));
36 | this.lastFiveSecondsCounter$ = this._buttonClicks$.pipe(
37 | windowedCount(5000)
38 | );
39 | this.lastFifteenSecondsCounter$ = this._buttonClicks$.pipe(
40 | windowedCount(15000)
41 | );
42 | this.chartData$ = createChartData({
43 | oneSecondWindow: this.lastSecondCounter$,
44 | fiveSecondWindow: this.lastFiveSecondsCounter$,
45 | fifteenSecondWindow: this.lastFifteenSecondsCounter$,
46 | });
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/examples-click-counter.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 | import { ClickCounterComponent } from './click-counter/click-counter.component';
5 | import { LineChartComponent } from './line-chart/line-chart.component';
6 | import { ImperativeClickCounterComponent } from './imperative-click-counter/imperative-click-counter.component';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RouterModule.forChild([
12 | { path: '', component: ClickCounterComponent },
13 | { path: 'imperative', component: ImperativeClickCounterComponent },
14 | ]),
15 | ],
16 | declarations: [
17 | ClickCounterComponent,
18 | LineChartComponent,
19 | ImperativeClickCounterComponent,
20 | ],
21 | })
22 | export class ExamplesClickCounterModule {}
23 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/imperative-click-counter/imperative-click-counter.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nixallover/reactive-code-animations/272b5349910436044bba27da0dca3394a043340b/libs/examples/click-counter/src/lib/imperative-click-counter/imperative-click-counter.component.css
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/imperative-click-counter/imperative-click-counter.component.html:
--------------------------------------------------------------------------------
1 | Click Me!
2 | Total Count: {{ count }}
3 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/imperative-click-counter/imperative-click-counter.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ImperativeClickCounterComponent } from './imperative-click-counter.component';
4 |
5 | describe('ImperativeClickCounterComponent', () => {
6 | let component: ImperativeClickCounterComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ImperativeClickCounterComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ImperativeClickCounterComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/imperative-click-counter/imperative-click-counter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'reactive-code-animations-imperative-click-counter',
5 | templateUrl: './imperative-click-counter.component.html',
6 | styleUrls: ['./imperative-click-counter.component.css'],
7 | })
8 | export class ImperativeClickCounterComponent {
9 | count = 0;
10 |
11 | addOne() {
12 | this.count++;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/line-chart/line-chart.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [LineChartComponent],
12 | }).compileComponents();
13 | });
14 |
15 | beforeEach(() => {
16 | fixture = TestBed.createComponent(LineChartComponent);
17 | component = fixture.componentInstance;
18 | fixture.detectChanges();
19 | });
20 |
21 | xit('should create', () => {
22 | expect(component).toBeTruthy();
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/line-chart/line-chart.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | ElementRef,
4 | Input,
5 | OnChanges,
6 | OnInit,
7 | SimpleChanges,
8 | ViewChild,
9 | } from '@angular/core';
10 | import { Chart } from 'chart.js';
11 | import { ChartData, convertToFormattedData } from '../chart-data.function';
12 |
13 | @Component({
14 | selector: 'reactive-code-animations-line-chart',
15 | templateUrl: './line-chart.component.html',
16 | styleUrls: ['./line-chart.component.scss'],
17 | })
18 | export class LineChartComponent implements OnInit, OnChanges {
19 | @ViewChild('canvas', { static: true }) canvas: ElementRef;
20 | @Input() data: ChartData;
21 | chart;
22 | config;
23 | initialized = false;
24 |
25 | ngOnInit(): void {
26 | this.config = {
27 | data: {
28 | datasets: [
29 | {
30 | label: 'One Second',
31 | data: this.data.oneSecond.map(convertToFormattedData),
32 | borderColor: 'rgb(255, 99, 132)',
33 | backgroundColor: Chart.helpers
34 | .color('rgb(255, 99, 132)')
35 | .alpha(0.2)
36 | .rgbString(),
37 | showLine: true,
38 | lineWidth: 5,
39 | pointRadius: 0,
40 | pointHoverRadius: 0,
41 | },
42 | {
43 | label: 'Five Seconds',
44 | data: this.data.fiveSeconds.map(convertToFormattedData),
45 | borderColor: 'rgb(54, 162, 235)',
46 | backgroundColor: Chart.helpers
47 | .color('rgb(54, 162, 235)')
48 | .alpha(0.2)
49 | .rgbString(),
50 | showLine: true,
51 | lineWidth: 5,
52 | pointRadius: 0,
53 | pointHoverRadius: 0,
54 | },
55 | {
56 | label: 'Fifteen Seconds',
57 | data: this.data.fifteenSeconds.map(convertToFormattedData),
58 | borderColor: 'rgb(255, 159, 64)',
59 | backgroundColor: Chart.helpers
60 | .color('rgb(255, 159, 64)')
61 | .alpha(0.2)
62 | .rgbString(),
63 | showLine: true,
64 | lineWidth: 5,
65 | pointRadius: 0,
66 | pointHoverRadius: 0,
67 | animations: {
68 | tension: {
69 | duration: 1000,
70 | easing: 'linear',
71 | from: 1,
72 | to: 0,
73 | loop: true,
74 | },
75 | },
76 | },
77 | ],
78 | },
79 | type: 'scatter',
80 | options: {
81 | animations: {
82 | tension: {
83 | duration: 1000,
84 | easing: 'linear',
85 | from: 1,
86 | to: 0,
87 | loop: true,
88 | },
89 | },
90 | responsive: false,
91 | title: {
92 | display: true,
93 | text: 'Clicks Per Sliding Window',
94 | },
95 | // tooltips: {
96 | // mode: 'nearest',
97 | // intersect: false,
98 | // },
99 | // hover: {
100 | // mode: 'nearest',
101 | // intersect: true,
102 | // },
103 | scales: {
104 | xAxes: [
105 | {
106 | display: true,
107 | scaleLabel: {
108 | display: true,
109 | labelString: 'Time Elapsed',
110 | },
111 | ticks: {
112 | min: 0,
113 | max: 1,
114 | },
115 | },
116 | ],
117 | yAxes: [
118 | {
119 | display: true,
120 | scaleLabel: {
121 | display: true,
122 | labelString: 'Clicks Per Window',
123 | },
124 | ticks: {
125 | min: 0,
126 | max: 1,
127 | },
128 | },
129 | ],
130 | },
131 | },
132 | };
133 | const ctx = (document.getElementById(
134 | 'chart'
135 | ) as HTMLCanvasElement).getContext('2d');
136 | this.chart = new Chart(ctx, this.config);
137 | this.initialized = true;
138 | }
139 |
140 | ngOnChanges(changes: SimpleChanges) {
141 | if (!this.initialized) {
142 | return;
143 | }
144 | if (changes.data) {
145 | for (const property of [
146 | 'oneSecond',
147 | 'fiveSeconds',
148 | 'fifteenSeconds',
149 | ] as const) {
150 | const lastValueOfCurrent =
151 | changes.data.currentValue[property][
152 | changes.data.currentValue[property].length - 1
153 | ];
154 | const lastValueOfPrevious =
155 | changes.data.previousValue[property][
156 | changes.data.previousValue[property].length - 1
157 | ];
158 | if (
159 | lastValueOfCurrent.clicksPerWindow !==
160 | lastValueOfPrevious.clicksPerWindow
161 | ) {
162 | const index =
163 | property === 'oneSecond' ? 0 : property === 'fiveSeconds' ? 1 : 2;
164 | this.config.data.datasets[index].data.push(
165 | convertToFormattedData(lastValueOfCurrent)
166 | );
167 | this.config.options.scales.xAxes[0].ticks.max =
168 | lastValueOfCurrent.timeElapsed / 1000;
169 | if (
170 | property === 'fifteenSeconds' &&
171 | lastValueOfCurrent.clicksPerWindow >
172 | this.config.options.scales.yAxes[0].ticks.max
173 | ) {
174 | this.config.options.scales.yAxes[0].ticks.max =
175 | lastValueOfCurrent.clicksPerWindow;
176 | }
177 | this.chart.update();
178 | }
179 | }
180 | }
181 | }
182 | }
183 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/lib/windowed-count.function.ts:
--------------------------------------------------------------------------------
1 | import { Observable, timer } from 'rxjs';
2 | import { mergeMap, take, map, scan, startWith } from 'rxjs/operators';
3 |
4 | export function windowedCount(windowLength: number) {
5 | return function (incoming: Observable): Observable {
6 | return incoming.pipe(
7 | mergeMap(() =>
8 | timer(0, windowLength).pipe(
9 | take(2),
10 | map((_, i) => (i === 0 ? ('start' as const) : ('stop' as const)))
11 | )
12 | ),
13 | scan((acc, signal) => (signal === 'start' ? acc + 1 : acc - 1), 0),
14 | startWith(0)
15 | );
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import 'jest-preset-angular';
2 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.lib.json"
8 | },
9 | {
10 | "path": "./tsconfig.spec.json"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "target": "es2015",
6 | "declaration": true,
7 | "declarationMap": true,
8 | "inlineSources": true,
9 | "types": [],
10 | "lib": ["dom", "es2018"]
11 | },
12 | "angularCompilerOptions": {
13 | "skipTemplateCodegen": true,
14 | "strictMetadataEmit": true,
15 | "enableResourceInlining": true
16 | },
17 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
18 | "include": ["**/*.ts"]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/examples/click-counter/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "files": ["src/test-setup.ts"],
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/libs/examples/series/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts"],
7 | "extends": [
8 | "plugin:@nrwl/nx/angular",
9 | "plugin:@angular-eslint/template/process-inline-templates"
10 | ],
11 | "parserOptions": { "project": ["libs/examples/series/tsconfig.*?.json"] },
12 | "rules": {
13 | "@angular-eslint/directive-selector": [
14 | "error",
15 | {
16 | "type": "attribute",
17 | "prefix": "rca",
18 | "style": "camelCase"
19 | }
20 | ],
21 | "@angular-eslint/component-selector": [
22 | "error",
23 | {
24 | "type": "element",
25 | "prefix": "rca",
26 | "style": "kebab-case"
27 | }
28 | ]
29 | }
30 | },
31 | {
32 | "files": ["*.html"],
33 | "extends": ["plugin:@nrwl/nx/angular-template"],
34 | "rules": {}
35 | }
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/libs/examples/series/README.md:
--------------------------------------------------------------------------------
1 | # examples-series
2 |
3 | This library was generated with [Nx](https://nx.dev).
4 |
5 | ## Running unit tests
6 |
7 | Run `nx test examples-series` to execute the unit tests.
8 |
--------------------------------------------------------------------------------
/libs/examples/series/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'examples-series',
3 | preset: '../../../jest.preset.js',
4 | setupFilesAfterEnv: ['/src/test-setup.ts'],
5 | globals: {
6 | 'ts-jest': {
7 | tsConfig: '/tsconfig.spec.json',
8 | stringifyContentPathRegex: '\\.(html|svg)$',
9 | astTransformers: {
10 | before: [
11 | 'jest-preset-angular/build/InlineFilesTransformer',
12 | 'jest-preset-angular/build/StripStylesTransformer',
13 | ],
14 | },
15 | },
16 | },
17 | coverageDirectory: '../../../coverage/libs/examples/series',
18 | snapshotSerializers: [
19 | 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
20 | 'jest-preset-angular/build/AngularSnapshotSerializer.js',
21 | 'jest-preset-angular/build/HTMLCommentSerializer.js',
22 | ],
23 | };
24 |
--------------------------------------------------------------------------------
/libs/examples/series/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/examples-series.module';
2 |
--------------------------------------------------------------------------------
/libs/examples/series/src/lib/examples-series.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule, Route } from '@angular/router';
4 | import { SeriesExampleComponent } from './series-example/series-example.component';
5 |
6 | export const examplesSeriesRoutes: Route[] = [
7 | {
8 | path: '',
9 | component: SeriesExampleComponent,
10 | },
11 | ];
12 |
13 | @NgModule({
14 | imports: [CommonModule, RouterModule.forChild(examplesSeriesRoutes)],
15 | declarations: [SeriesExampleComponent],
16 | })
17 | export class ExamplesSeriesModule {}
18 |
--------------------------------------------------------------------------------
/libs/examples/series/src/lib/series-example/series-example.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ item }}
5 |
6 |
8 |
9 |
10 |
15 |
16 | Load more
17 |
18 |
>(this.items);
40 | complete = false;
41 | isLoading = false;
42 |
43 | trackByFn(index, item) {
44 | return index;
45 | }
46 |
47 | loadMore() {
48 | this.isLoading = true;
49 | timer(3000).subscribe((_) => {
50 | this.items$.next([...this.items, 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm']);
51 | this.isLoading = false;
52 | this.complete = true;
53 | });
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/libs/examples/series/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import 'jest-preset-angular';
2 |
--------------------------------------------------------------------------------
/libs/examples/series/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.lib.json"
8 | },
9 | {
10 | "path": "./tsconfig.spec.json"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/examples/series/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "target": "es2015",
6 | "declaration": true,
7 | "declarationMap": true,
8 | "inlineSources": true,
9 | "types": [],
10 | "lib": ["dom", "es2018"]
11 | },
12 | "angularCompilerOptions": {
13 | "skipTemplateCodegen": true,
14 | "strictMetadataEmit": true,
15 | "enableResourceInlining": true
16 | },
17 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
18 | "include": ["**/*.ts"]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/examples/series/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "files": ["src/test-setup.ts"],
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/libs/shared/animations/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts"],
7 | "extends": [
8 | "plugin:@nrwl/nx/angular",
9 | "plugin:@angular-eslint/template/process-inline-templates"
10 | ],
11 | "parserOptions": {
12 | "project": ["libs/shared/animations/tsconfig.*?.json"]
13 | },
14 | "rules": {
15 | "@angular-eslint/directive-selector": [
16 | "error",
17 | {
18 | "type": "attribute",
19 | "prefix": "rca",
20 | "style": "camelCase"
21 | }
22 | ],
23 | "@angular-eslint/component-selector": [
24 | "error",
25 | {
26 | "type": "element",
27 | "prefix": "rca",
28 | "style": "kebab-case"
29 | }
30 | ]
31 | }
32 | },
33 | {
34 | "files": ["*.html"],
35 | "extends": ["plugin:@nrwl/nx/angular-template"],
36 | "rules": {}
37 | }
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/libs/shared/animations/README.md:
--------------------------------------------------------------------------------
1 | # shared-animations
2 |
3 | This library was generated with [Nx](https://nx.dev).
4 |
5 | ## Running unit tests
6 |
7 | Run `nx test shared-animations` to execute the unit tests.
8 |
--------------------------------------------------------------------------------
/libs/shared/animations/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'shared-animations',
3 | preset: '../../../jest.preset.js',
4 | setupFilesAfterEnv: ['/src/test-setup.ts'],
5 | globals: {
6 | 'ts-jest': {
7 | tsConfig: '/tsconfig.spec.json',
8 | stringifyContentPathRegex: '\\.(html|svg)$',
9 | astTransformers: {
10 | before: [
11 | 'jest-preset-angular/build/InlineFilesTransformer',
12 | 'jest-preset-angular/build/StripStylesTransformer',
13 | ],
14 | },
15 | },
16 | },
17 | coverageDirectory: '../../../coverage/libs/shared/animations',
18 | snapshotSerializers: [
19 | 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
20 | 'jest-preset-angular/build/AngularSnapshotSerializer.js',
21 | 'jest-preset-angular/build/HTMLCommentSerializer.js',
22 | ],
23 | };
24 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/slide.animation';
2 | export * from './lib/fade.animation';
3 | export * from './lib/lift.animation';
4 | export * from './lib/drop.animation';
5 | export * from './lib/rotate.animation';
6 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/lib/drop.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate } from '@angular/animations';
2 |
3 | export const dropInAnimation = animation(
4 | [
5 | style({ opacity: '{{ start }}', transform: 'translate({{ startPos }})' }),
6 | animate(
7 | '{{ time }}',
8 | style({ opacity: '{{ end }}', transform: 'translate({{ endPos }})' })
9 | ),
10 | ],
11 | {
12 | params: {
13 | time: '500ms ease-out',
14 | start: 0,
15 | end: 1,
16 | startPos: '0, -100px',
17 | endPos: '0, 0',
18 | },
19 | }
20 | );
21 |
22 | export const dropOutAnimation = animation(
23 | [
24 | style({ opacity: '{{ start }}', transform: 'translate({{ startPos }})' }),
25 | animate(
26 | '{{ time }}',
27 | style({ opacity: '{{ end }}', transform: 'translate({{ endPos }})' })
28 | ),
29 | ],
30 | {
31 | params: {
32 | time: '500ms ease-in',
33 | start: 1,
34 | end: 0,
35 | startPos: '0, 0',
36 | endPos: '0, 100px',
37 | },
38 | }
39 | );
40 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/lib/fade.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate } from '@angular/animations';
2 |
3 | export const fadeInAnimation = animation(
4 | [
5 | style({ opacity: '{{ start }}', transform: 'scale({{ startScale }})' }),
6 | animate(
7 | '{{ time }}',
8 | style({ opacity: '{{ end }}', transform: 'scale({{ endScale }})' })
9 | ),
10 | ],
11 | {
12 | params: {
13 | time: '500ms ease-out',
14 | start: 0,
15 | end: 1,
16 | startScale: 0.9,
17 | endScale: 1,
18 | },
19 | }
20 | );
21 |
22 | export const fadeOutAnimation = animation(
23 | [
24 | style({ opacity: '{{ start }}', transform: 'scale({{ startScale }})' }),
25 | animate(
26 | '{{ time }}',
27 | style({ opacity: '{{ end }}', transform: 'scale({{ endScale }})' })
28 | ),
29 | ],
30 | {
31 | params: {
32 | time: '500ms ease-in',
33 | start: 1,
34 | end: 0,
35 | startScale: 1,
36 | endScale: 0.9,
37 | },
38 | }
39 | );
40 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/lib/lift.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate } from '@angular/animations';
2 |
3 | export const liftInAnimation = animation(
4 | [
5 | style({ opacity: '{{ start }}', transform: 'translate({{ startPos }})' }),
6 | animate(
7 | '{{ time }}',
8 | style({ opacity: '{{ end }}', transform: 'translate({{ endPos }})' })
9 | ),
10 | ],
11 | {
12 | params: {
13 | time: '500ms ease-out',
14 | start: 0,
15 | end: 1,
16 | startPos: '0, 100px',
17 | endPos: '0, 0',
18 | },
19 | }
20 | );
21 |
22 | export const liftOutAnimation = animation(
23 | [
24 | style({ opacity: '{{ start }}', transform: 'translate({{ startPos }})' }),
25 | animate(
26 | '{{ time }}',
27 | style({ opacity: '{{ end }}', transform: 'translate({{ endPos }})' })
28 | ),
29 | ],
30 | {
31 | params: {
32 | time: '500ms ease-in',
33 | start: 1,
34 | end: 0,
35 | startPos: '0, 0',
36 | endPos: '0, -100px',
37 | },
38 | }
39 | );
40 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/lib/rotate.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate } from '@angular/animations';
2 |
3 | export const rotateInAnimation = animation(
4 | [
5 | style({
6 | opacity: '{{ start }}',
7 | transform: 'translate({{ startPos }}) rotate({{startRotation}})',
8 | }),
9 | animate(
10 | '{{ time }}',
11 | style({
12 | opacity: '{{ end }}',
13 | transform: 'translate({{ endPos }}) rotate({{endRotation}})',
14 | })
15 | ),
16 | ],
17 | {
18 | params: {
19 | time: '500ms ease-out',
20 | start: 0,
21 | end: 1,
22 | startPos: '0, -100px',
23 | endPos: '0, 0',
24 | startRotation: '-15deg',
25 | endRotation: '0',
26 | },
27 | }
28 | );
29 |
30 | export const rotateOutAnimation = animation(
31 | [
32 | style({
33 | opacity: '{{ start }}',
34 | transform: 'translate({{ startPos }}) rotate({{startRotation}})',
35 | }),
36 | animate(
37 | '{{ time }}',
38 | style({
39 | opacity: '{{ end }}',
40 | transform: 'translate({{ endPos }}) rotate({{endRotation}})',
41 | })
42 | ),
43 | ],
44 | {
45 | params: {
46 | time: '500ms ease-in',
47 | start: 1,
48 | end: 0,
49 | startPos: '0, 0',
50 | endPos: '0, 100px',
51 | startRotation: '0',
52 | endRotation: '15deg',
53 | },
54 | }
55 | );
56 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/lib/slide.animation.ts:
--------------------------------------------------------------------------------
1 | import { animation, style, animate } from '@angular/animations';
2 |
3 | export const slideInAnimation = animation(
4 | [
5 | style({ opacity: '{{ start }}', height: '{{ startHeight }}' }),
6 | animate(
7 | '{{ time }}',
8 | style({ opacity: '{{ end }}', height: '{{ endHeight }}' })
9 | ),
10 | ],
11 | {
12 | params: {
13 | time: '500ms ease-out',
14 | start: 0,
15 | end: 1,
16 | startHeight: 0,
17 | endHeight: '*',
18 | },
19 | }
20 | );
21 |
22 | export const slideOutAnimation = animation(
23 | [
24 | style({ opacity: '{{ start }}', height: '{{ startHeight }}' }),
25 | animate(
26 | '{{ time }}',
27 | style({ opacity: '{{ end }}', height: '{{ endHeight }}' })
28 | ),
29 | ],
30 | {
31 | params: {
32 | time: '500ms ease-in',
33 | start: 1,
34 | end: 0,
35 | startHeight: '*',
36 | endHeight: 0,
37 | },
38 | }
39 | );
40 |
--------------------------------------------------------------------------------
/libs/shared/animations/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import 'jest-preset-angular';
2 |
--------------------------------------------------------------------------------
/libs/shared/animations/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.lib.json"
8 | },
9 | {
10 | "path": "./tsconfig.spec.json"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/shared/animations/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "target": "es2015",
6 | "declaration": true,
7 | "declarationMap": true,
8 | "inlineSources": true,
9 | "types": [],
10 | "lib": ["dom", "es2018"]
11 | },
12 | "angularCompilerOptions": {
13 | "skipTemplateCodegen": true,
14 | "strictMetadataEmit": true,
15 | "enableResourceInlining": true
16 | },
17 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
18 | "include": ["**/*.ts"]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/shared/animations/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "files": ["src/test-setup.ts"],
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/libs/shared/carousel/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["../../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts"],
7 | "extends": [
8 | "plugin:@nrwl/nx/angular",
9 | "plugin:@angular-eslint/template/process-inline-templates"
10 | ],
11 | "parserOptions": { "project": ["libs/shared/carousel/tsconfig.*?.json"] },
12 | "rules": {
13 | "@angular-eslint/directive-selector": [
14 | "error",
15 | { "type": "attribute", "prefix": "rca", "style": "camelCase" }
16 | ],
17 | "@angular-eslint/component-selector": [
18 | "error",
19 | { "type": "element", "prefix": "rca", "style": "kebab-case" }
20 | ]
21 | }
22 | },
23 | {
24 | "files": ["*.html"],
25 | "extends": ["plugin:@nrwl/nx/angular-template"],
26 | "rules": {}
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/libs/shared/carousel/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: 'shared-carousel',
3 | preset: '../../../jest.preset.js',
4 | setupFilesAfterEnv: ['/src/test-setup.ts'],
5 | globals: {
6 | 'ts-jest': {
7 | tsConfig: '/tsconfig.spec.json',
8 | stringifyContentPathRegex: '\\.(html|svg)$',
9 | astTransformers: {
10 | before: [
11 | 'jest-preset-angular/build/InlineFilesTransformer',
12 | 'jest-preset-angular/build/StripStylesTransformer',
13 | ],
14 | },
15 | },
16 | },
17 | coverageDirectory: '../../../coverage/libs/shared/carousel',
18 | snapshotSerializers: [
19 | 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
20 | 'jest-preset-angular/build/AngularSnapshotSerializer.js',
21 | 'jest-preset-angular/build/HTMLCommentSerializer.js',
22 | ],
23 | };
24 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/shared-carousel.module';
2 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel-item/carousel-item.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
8 |
9 |
10 |
12 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel-item/carousel-item.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | justify-content: center;
4 | max-width: 100%;
5 | position: absolute;
6 | width: 100%;
7 |
8 | @media (max-width: 960px) {
9 | flex-direction: column;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel-item/carousel-item.component.ts:
--------------------------------------------------------------------------------
1 | import { transition, trigger, useAnimation } from '@angular/animations';
2 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
3 | import { dropInAnimation, fadeOutAnimation } from '@rca/shared/animations';
4 | import { CarouselState } from '../carousel/carousel.utils';
5 |
6 | @Component({
7 | selector: 'rca-carousel-item',
8 | templateUrl: './carousel-item.component.html',
9 | styleUrls: ['./carousel-item.component.scss'],
10 | animations: [
11 | trigger('fadeToCenter1', [
12 | transition(':enter', [
13 | useAnimation(dropInAnimation, {
14 | params: {
15 | startPos: '-50px, -50px',
16 | time: '500ms 600ms ease-out',
17 | },
18 | }),
19 | ]),
20 | transition(':leave', [useAnimation(fadeOutAnimation)]),
21 | ]),
22 | trigger('fadeToCenter2', [
23 | transition(':enter', [
24 | useAnimation(dropInAnimation, {
25 | params: {
26 | startPos: '50px, 50px',
27 | time: '500ms 800ms ease-out',
28 | },
29 | }),
30 | ]),
31 | transition(':leave', [useAnimation(fadeOutAnimation)]),
32 | ]),
33 | trigger('fadeToCenter3', [
34 | transition(':enter', [
35 | useAnimation(dropInAnimation, {
36 | params: {
37 | startPos: '50px, -50px',
38 | time: '500ms 1000ms ease-out',
39 | },
40 | }),
41 | ]),
42 | transition(':leave', [useAnimation(fadeOutAnimation)]),
43 | ]),
44 | ],
45 | changeDetection: ChangeDetectionStrategy.OnPush,
46 | })
47 | export class CarouselItemComponent {
48 | @Input() state: CarouselState;
49 | @Input() activeState: CarouselState;
50 | }
51 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel/auto-advance.operator.ts:
--------------------------------------------------------------------------------
1 | import { interval, merge, Observable, of } from 'rxjs';
2 | import { scan, switchMap } from 'rxjs/operators';
3 |
4 | export function autoAdvance(
5 | period: number,
6 | nextState: (currentState: T) => T
7 | ) {
8 | return function (incoming: Observable): Observable {
9 | return incoming.pipe(
10 | switchMap((currentState) =>
11 | merge(
12 | of(currentState),
13 | interval(period).pipe(scan((acc) => nextState(acc), currentState))
14 | )
15 | )
16 | );
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
22 |
24 |
25 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel/carousel.component.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 | :host {
4 | display: block;
5 | min-height: 650px;
6 | width: 100%;
7 | }
8 | .carousel-control-container {
9 | justify-content: center;
10 | display: flex;
11 | margin: 1rem;
12 | }
13 | .carousel-control {
14 | display: flex;
15 | justify-content: space-between;
16 | max-width: 40rem;
17 | margin-bottom: 2rem;
18 | width: 10rem;
19 |
20 | @media (max-width: 500px) {
21 | width: 100%;
22 | }
23 |
24 | button {
25 | background-color: #ccc;
26 | border: 0;
27 | border-radius: 50%;
28 | height: 0.75rem;
29 | position: relative;
30 | transition: all 0.3s;
31 | width: 0.75rem;
32 |
33 | &:hover {
34 | transform: scale(2);
35 | }
36 |
37 | &:disabled {
38 | background-color: $primary;
39 | }
40 |
41 | &:last-child {
42 | margin-right: 0;
43 | }
44 | }
45 | }
46 |
47 | .item-container {
48 | width: 100%;
49 | position: relative;
50 | }
51 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel/carousel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | CarouselState,
4 | CAROUSEL_STATES,
5 | createReactiveCarouselMachine,
6 | } from './carousel.utils';
7 |
8 | let _id = 0;
9 | @Component({
10 | selector: 'rca-carousel',
11 | templateUrl: './carousel.component.html',
12 | styleUrls: ['./carousel.component.scss'],
13 | })
14 | export class CarouselComponent {
15 | carouselId = `rca-carousel-${_id++}`;
16 | states = CAROUSEL_STATES;
17 | private _reactiveMachine = createReactiveCarouselMachine();
18 | activeState$ = this._reactiveMachine.activeState$;
19 |
20 | userClick(state: CarouselState) {
21 | this._reactiveMachine.userInitiatedStateChange(state);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/carousel/carousel.utils.ts:
--------------------------------------------------------------------------------
1 | import { merge, Observable, Observer } from 'rxjs';
2 | import { map, shareReplay, startWith } from 'rxjs/operators';
3 | import { autoAdvance } from './auto-advance.operator';
4 |
5 | export const CAROUSEL_STATES = ['spongebob', 'patrick', 'gary'] as const;
6 |
7 | export type CarouselState = typeof CAROUSEL_STATES[number];
8 |
9 | export interface ReactiveCarouselMachine {
10 | activeState$: Observable;
11 | userInitiatedStateChange: (carouselState: CarouselState) => void;
12 | }
13 |
14 | export function createReactiveCarouselMachine(
15 | timeToAutoAdvance: number = 5000,
16 | initialState: CarouselState = 'spongebob'
17 | ): ReactiveCarouselMachine {
18 | const observers: Record> = {
19 | spongebob: null,
20 | patrick: null,
21 | gary: null,
22 | };
23 | const userInitiatedActions = CAROUSEL_STATES.reduce((acc, carouselState) => {
24 | acc[carouselState] = new Observable((observer) => {
25 | observers[carouselState] = observer;
26 | });
27 | return acc;
28 | }, {} as Record>);
29 | const activeState$ = activeCarouselState({
30 | userInitiatedActions,
31 | initialState,
32 | timeToAutoAdvance,
33 | });
34 | const userInitiatedStateChange = (carouselState: CarouselState) => {
35 | observers[carouselState].next();
36 | };
37 | return {
38 | userInitiatedStateChange,
39 | activeState$,
40 | };
41 | }
42 |
43 | interface ActiveCarouselItemParams {
44 | userInitiatedActions: Record>;
45 | initialState: CarouselState;
46 | timeToAutoAdvance: number;
47 | }
48 |
49 | function activeCarouselState({
50 | userInitiatedActions,
51 | initialState,
52 | timeToAutoAdvance,
53 | }: ActiveCarouselItemParams): Observable {
54 | return merge(
55 | ...Object.entries(
56 | userInitiatedActions
57 | ).map(
58 | ([carouselState, userInitiatedObservable]: [
59 | CarouselState,
60 | Observable
61 | ]) => userInitiatedObservable.pipe(map(() => carouselState))
62 | )
63 | ).pipe(
64 | startWith(initialState),
65 | autoAdvance(timeToAutoAdvance, nextState),
66 | shareReplay(1)
67 | );
68 | }
69 |
70 | function nextState(state: CarouselState): CarouselState {
71 | if (state === 'spongebob') {
72 | return 'patrick';
73 | }
74 | if (state === 'patrick') {
75 | return 'gary';
76 | }
77 | return 'spongebob';
78 | }
79 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/lib/shared-carousel.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { CarouselComponent } from './carousel/carousel.component';
4 | import { CarouselItemComponent } from './carousel-item/carousel-item.component';
5 |
6 | @NgModule({
7 | imports: [CommonModule],
8 | declarations: [CarouselComponent, CarouselItemComponent],
9 | exports: [CarouselComponent, CarouselItemComponent],
10 | })
11 | export class SharedCarouselModule {}
12 |
--------------------------------------------------------------------------------
/libs/shared/carousel/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import 'jest-preset-angular';
2 |
--------------------------------------------------------------------------------
/libs/shared/carousel/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.lib.json"
8 | },
9 | {
10 | "path": "./tsconfig.spec.json"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/libs/shared/carousel/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "target": "es2015",
6 | "declaration": true,
7 | "declarationMap": true,
8 | "inlineSources": true,
9 | "types": [],
10 | "lib": ["dom", "es2018"]
11 | },
12 | "angularCompilerOptions": {
13 | "skipTemplateCodegen": true,
14 | "strictMetadataEmit": true,
15 | "enableResourceInlining": true
16 | },
17 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
18 | "include": ["**/*.ts"]
19 | }
20 |
--------------------------------------------------------------------------------
/libs/shared/carousel/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node"]
7 | },
8 | "files": ["src/test-setup.ts"],
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/libs/styles/_variables.scss:
--------------------------------------------------------------------------------
1 | $light-gray: #efefef;
2 | $dark-gray: #333;
3 |
4 | $primary: #4285f4;
5 |
6 | $secondary: #ff5722;
7 | $secondary-dark: #ce4d25;
8 |
9 | $main-background: $light-gray;
10 | $main-text: $dark-gray;
11 |
--------------------------------------------------------------------------------
/libs/styles/base.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 | html,
4 | body {
5 | margin: 0;
6 | }
7 |
8 | html {
9 | background-color: $main-background;
10 | box-sizing: border-box;
11 | font-size: 16px;
12 | font-family: 'Recursive', sans-serif;
13 | font-weight: 300;
14 | color: $main-text;
15 | }
16 |
17 | *,
18 | *:before,
19 | *:after {
20 | box-sizing: inherit;
21 | }
22 |
23 | h1 {
24 | font-size: 300%;
25 | margin-top: 2rem;
26 | margin-bottom: 1rem;
27 | }
28 |
29 | h2 {
30 | font-size: 250%;
31 | margin-top: 2rem;
32 | margin-bottom: 1rem;
33 | }
34 |
35 | h3 {
36 | font-size: 200%;
37 | margin-top: 2rem;
38 | margin-bottom: 1rem;
39 | }
40 |
41 | h4 {
42 | font-size: 150%;
43 | margin-top: 2rem;
44 | margin-bottom: 1rem;
45 | }
46 |
47 | h5 {
48 | font-size: 125%;
49 | margin-top: 2rem;
50 | margin-bottom: 1rem;
51 | }
52 |
53 | h6 {
54 | font-size: 90%;
55 | text-transform: uppercase;
56 | letter-spacing: 0.3rem;
57 | margin-top: 1rem;
58 | margin-bottom: 0.5rem;
59 | }
60 |
61 | p {
62 | line-height: 1.5rem;
63 | margin-bottom: 1.5rem;
64 | }
65 |
66 | a {
67 | color: $main-text;
68 | text-decoration: $main-text underline 1px;
69 | text-underline-offset: 2px;
70 | }
71 |
72 | small {
73 | font-size: 85%;
74 | }
75 |
76 | .button {
77 | border: 0;
78 | border-radius: 4px;
79 | background-color: $secondary;
80 | color: white;
81 | cursor: pointer;
82 | font-family: inherit;
83 | font-size: inherit;
84 | font-weight: 600;
85 | padding: 0.75rem 1.5rem;
86 | transition: background-color 0.2s;
87 |
88 | &:not([disabled]) {
89 | &:hover,
90 | &:active {
91 | background-color: $secondary-dark;
92 | }
93 | }
94 |
95 | &[disabled] {
96 | border-color: #aaa;
97 | background-color: #aaa;
98 | color: #777;
99 | cursor: not-allowed;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "implicitDependencies": {
3 | "angular.json": "*",
4 | "package.json": { "dependencies": "*", "devDependencies": "*" },
5 | "tsconfig.base.json": "*",
6 | "tslint.json": "*",
7 | ".eslintrc.json": "*",
8 | "nx.json": "*"
9 | },
10 | "affected": { "defaultBase": "main" },
11 | "npmScope": "reactive-code-animations",
12 | "tasksRunnerOptions": {
13 | "default": {
14 | "runner": "@nrwl/nx-cloud",
15 | "options": {
16 | "cacheableOperations": ["build", "lint", "test", "e2e"],
17 | "accessToken": "MDQ1NjRmOGYtZjdiYi00NTBlLWE0NTgtMTUxZGU0NzAwZTM2fHJlYWQ=",
18 | "canTrackAnalytics": false,
19 | "showUsageWarnings": true
20 | }
21 | }
22 | },
23 | "projects": {
24 | "reactive-code-animations": { "tags": [] },
25 | "reactive-code-animations-e2e": {
26 | "tags": [],
27 | "implicitDependencies": ["reactive-code-animations"]
28 | },
29 | "styles": { "tags": ["type:ui"] },
30 | "shared-animations": { "tags": ["type:util"] },
31 | "examples-carousel": { "tags": ["type:feature"] },
32 | "shared-carousel": { "tags": ["type:ui"] },
33 | "examples-click-counter": { "tags": ["type:feature"] },
34 | "examples-series": { "tags": ["type:feature"] }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactive-code-animations",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "nx",
7 | "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
8 | "nx": "nx",
9 | "start": "ng serve --port 4792",
10 | "build": "ng build",
11 | "test": "ng test",
12 | "lint": "nx workspace-lint && ng lint",
13 | "e2e": "ng e2e",
14 | "affected:apps": "nx affected:apps",
15 | "affected:libs": "nx affected:libs",
16 | "affected:build": "nx affected:build",
17 | "affected:e2e": "nx affected:e2e",
18 | "affected:test": "nx affected:test",
19 | "affected:lint": "nx affected:lint",
20 | "affected:dep-graph": "nx affected:dep-graph",
21 | "affected": "nx affected",
22 | "format": "nx format:write",
23 | "format:write": "nx format:write",
24 | "format:check": "nx format:check",
25 | "update": "nx migrate latest",
26 | "workspace-generator": "nx workspace-generator",
27 | "dep-graph": "nx dep-graph",
28 | "help": "nx help"
29 | },
30 | "private": true,
31 | "dependencies": {
32 | "@angular/animations": "^11.2.0",
33 | "@angular/common": "^11.2.0",
34 | "@angular/compiler": "^11.2.0",
35 | "@angular/core": "^11.2.0",
36 | "@angular/fire": "^6.1.4",
37 | "@angular/forms": "^11.2.0",
38 | "@angular/platform-browser": "^11.2.0",
39 | "@angular/platform-browser-dynamic": "^11.2.0",
40 | "@angular/router": "^11.2.0",
41 | "@nrwl/angular": "11.5.1",
42 | "chart.js": "^2.9.4",
43 | "firebase": "^7.0 || ^8.0",
44 | "rxjs": "~6.6.3",
45 | "tslib": "^2.0.0",
46 | "zone.js": "^0.10.2"
47 | },
48 | "devDependencies": {
49 | "@angular-devkit/architect": ">= 0.900 < 0.1200",
50 | "@angular-devkit/build-angular": "~0.1102.0",
51 | "@angular-eslint/eslint-plugin": "~1.0.0",
52 | "@angular-eslint/eslint-plugin-template": "~1.0.0",
53 | "@angular-eslint/template-parser": "~1.0.0",
54 | "@angular/cli": "~11.0.0",
55 | "@angular/compiler-cli": "^11.2.0",
56 | "@angular/language-service": "^11.2.0",
57 | "@nrwl/cli": "11.5.1",
58 | "@nrwl/cypress": "11.5.1",
59 | "@nrwl/eslint-plugin-nx": "11.5.1",
60 | "@nrwl/jest": "11.5.1",
61 | "@nrwl/linter": "11.5.1",
62 | "@nrwl/nx-cloud": "^13.0.2",
63 | "@nrwl/tao": "11.5.1",
64 | "@nrwl/workspace": "11.5.1",
65 | "@types/jest": "26.0.8",
66 | "@types/node": "12.12.38",
67 | "@typescript-eslint/eslint-plugin": "4.3.0",
68 | "@typescript-eslint/parser": "4.3.0",
69 | "cypress": "^6.0.1",
70 | "dotenv": "6.2.0",
71 | "eslint": "7.10.0",
72 | "eslint-config-prettier": "8.1.0",
73 | "eslint-plugin-cypress": "^2.10.3",
74 | "firebase-tools": "^8.0.0",
75 | "fuzzy": "^0.1.3",
76 | "inquirer": "^6.2.2",
77 | "inquirer-autocomplete-prompt": "^1.0.1",
78 | "jest": "26.2.2",
79 | "jest-preset-angular": "8.3.2",
80 | "open": "^7.0.3",
81 | "prettier": "2.2.1",
82 | "ts-jest": "26.4.0",
83 | "ts-node": "~9.1.1",
84 | "typescript": "~4.0.3"
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/tools/generators/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nixallover/reactive-code-animations/272b5349910436044bba27da0dca3394a043340b/tools/generators/.gitkeep
--------------------------------------------------------------------------------
/tools/tsconfig.tools.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "../dist/out-tsc/tools",
5 | "rootDir": ".",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": ["node"],
9 | "importHelpers": false
10 | },
11 | "include": ["**/*.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "rootDir": ".",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "importHelpers": true,
11 | "target": "es2015",
12 | "module": "esnext",
13 | "lib": ["es2017", "dom"],
14 | "skipLibCheck": true,
15 | "skipDefaultLibCheck": true,
16 | "baseUrl": ".",
17 | "paths": {
18 | "@rca/styles": ["libs/styles/src/index.ts"],
19 | "@rca/shared/animations": ["libs/shared/animations/src/index.ts"],
20 | "@rca/examples/carousel": ["libs/examples/carousel/src/index.ts"],
21 | "@rca/shared/carousel": ["libs/shared/carousel/src/index.ts"],
22 | "@reactive-code-animations/examples/click-counter": [
23 | "libs/examples/click-counter/src/index.ts"],
24 | "@rca/examples/series": [
25 | "libs/examples/series/src/index.ts"
26 | ]
27 | }
28 | },
29 | "exclude": ["node_modules", "tmp"]
30 | }
31 |
--------------------------------------------------------------------------------
9 | 
14 | 
19 | 
26 | 
31 | 
36 | 
43 | 
44 | 
49 |