(id: string): T;
15 | };
16 | };
17 |
18 | // First, initialize the Angular testing environment.
19 | getTestBed().initTestEnvironment(
20 | BrowserDynamicTestingModule,
21 | platformBrowserDynamicTesting()
22 | );
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().map(context);
27 |
--------------------------------------------------------------------------------
/workspace/projects/date-value-accessor/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/lib",
6 | "target": "es2020",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": [],
11 | "lib": [
12 | "dom",
13 | "es2018"
14 | ]
15 | },
16 | "angularCompilerOptions": {
17 | "skipTemplateCodegen": true,
18 | "strictMetadataEmit": true,
19 | "enableResourceInlining": true
20 | },
21 | "exclude": [
22 | "src/test.ts",
23 | "**/*.spec.ts"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/workspace/projects/date-value-accessor/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.lib.json",
4 | "compilerOptions": {
5 | "declarationMap": false
6 | },
7 | "angularCompilerOptions": {
8 | "compilationMode": "partial"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/workspace/projects/date-value-accessor/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts"
12 | ],
13 | "include": [
14 | "**/*.spec.ts",
15 | "**/*.d.ts"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/workspace/projects/date-value-accessor/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "lib",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "lib",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/workspace/projects/demo/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
18 | IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
19 |
--------------------------------------------------------------------------------
/workspace/projects/demo/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../../coverage/demo'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/app/app.component.css
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | DateValueAccessor Demo
2 |
3 |
4 | This project knows a number of different value accessors.
5 |
6 |
7 |
8 | If you want to use date objects, select the first option.
9 | If you want to work with ISO-formatted strings instead, select the second option.
10 |
11 |
12 |
13 | 1. Examples for working with date objects (click to show)
19 |
20 |
21 |
22 | 2. Examples for working with ISO-formatted strings (click to show)
28 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, waitForAsync } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(waitForAsync(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html'
6 | })
7 | export class AppComponent {
8 |
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { IsoDateValueAccessorModule } from 'projects/date-value-accessor/src/lib/iso-date-value-accessor.module';
5 | import {
6 | DateValueAccessorModule,
7 | LocalDateValueAccessorModule,
8 | LocalIsoDateValueAccessorModule,
9 | } from 'projects/date-value-accessor/src/public-api';
10 |
11 | import { AppComponent } from './app.component';
12 | import { ReactiveFormComponent } from './demo-with-dates/reactive-form/reactive-form.component';
13 | import { TemplateDrivenFormComponent } from './demo-with-dates/template-driven-form/template-driven-form.component';
14 | import { ReactiveFormIsoComponent } from './demo-with-strings/reactive-form-iso/reactive-form-iso.component';
15 | import {
16 | TemplateDrivenFormIsoComponent,
17 | } from './demo-with-strings/template-driven-form-iso/template-driven-form-iso.component';
18 | import { ExplanationDateValueAccessorComponent } from './shared/explanation-date-value-accessor.component';
19 | import { ExplanationDefaultValueAccessorComponent } from './shared/explanation-default-value-accessor.component';
20 | import { ExplanationIsoDateValueAccessorComponent } from './shared/explanation-iso-date-value-accessor.component';
21 | import { ExplanationLocalDateValueAccessorComponent } from './shared/explanation-local-date-value-accessor.component';
22 | import { ExplanationLocalIsoDateValueAccessorComponent } from './shared/explanation-local-iso-date-value-accessor.component';
23 |
24 |
25 | @NgModule({
26 | declarations: [
27 | AppComponent,
28 | TemplateDrivenFormComponent,
29 | ReactiveFormComponent,
30 | TemplateDrivenFormIsoComponent,
31 | ReactiveFormIsoComponent,
32 | ExplanationDateValueAccessorComponent,
33 | ExplanationLocalDateValueAccessorComponent,
34 | ExplanationDefaultValueAccessorComponent,
35 | ExplanationIsoDateValueAccessorComponent,
36 | ExplanationLocalIsoDateValueAccessorComponent
37 | ],
38 | imports: [
39 | BrowserModule,
40 | FormsModule,
41 | ReactiveFormsModule,
42 | DateValueAccessorModule,
43 | LocalDateValueAccessorModule,
44 | IsoDateValueAccessorModule,
45 | LocalIsoDateValueAccessorModule
46 | ],
47 | bootstrap: [AppComponent]
48 | })
49 | export class AppModule { }
50 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/demo-with-dates/reactive-form/reactive-form.component.html:
--------------------------------------------------------------------------------
1 | Reactive Forms
2 |
3 |
6 |
DateValueAccessor
7 |
8 |
15 |
16 |
Toggle disabled state
17 |
18 |
19 | <input type="text"
20 | formControlName="version">
21 |
22 | <input type="date"
23 | formControlName="releaseDate"
24 | useValueAsDate >
25 |
26 |
27 |
28 | DEBUG:
29 | {{ demoDateValue | json }}
30 | typeof(releaseDate): {{ typeof(demoDateValue.releaseDate) }}
31 |
32 |
39 |
LocalDateValueAccessor
40 |
41 |
48 |
49 |
Toggle disabled state
50 |
51 |
52 | <input type="text"
53 | formControlName="version">
54 |
55 | <input type="date"
56 | formControlName="releaseDate"
57 | useValueAsLocalDate >
58 |
59 |
60 |
61 | DEBUG:
62 | {{ demoLocalDateValue | json }}
63 | typeof(releaseDate): {{ typeof(demoLocalDateValue.releaseDate) }}
64 |
65 |
72 |
DefaultValueAccessor(does not work)
73 |
74 |
81 |
82 |
Toggle disabled state
83 |
84 |
85 | <input type="text"
86 | formControlName="version">
87 |
88 | <input type="date"
89 | formControlName="releaseDate">
90 |
91 |
92 |
93 | DEBUG:
94 | {{ demoDefault | json }}
95 | typeof(releaseDate): {{ typeof(demoDefault.releaseDate) }}
96 |
97 |
Template-Driven Forms
2 |
3 |
6 |
DateValueAccessor
7 |
8 |
15 |
16 |
Toggle disabled state
17 |
18 |
19 | <input type="text"
20 | name="version"
21 | [(ngModel)]="demoDateValue.version">
22 |
23 | <input type="date"
24 | name="releaseDate"
25 | [(ngModel)]="demoDateValue.releaseDate"
26 | useValueAsDate >
27 |
28 |
29 |
30 | DEBUG:
31 | {{ demoDateValue | json }}
32 | typeof(releaseDate): {{ typeof(demoDateValue.releaseDate) }}
33 |
34 |
41 |
LocalDateValueAccessor
42 |
43 |
50 |
51 |
Toggle disabled state
52 |
53 |
54 | <input type="text"
55 | name="version"
56 | [(ngModel)]="demoLocalDateValue.version">
57 |
58 | <input type="date"
59 | name="releaseDate"
60 | [(ngModel)]="demoLocalDateValue.releaseDate"
61 | useValueAsLocalDate >
62 |
63 |
64 |
65 | DEBUG:
66 | {{ demoLocalDateValue | json }}
67 | typeof(releaseDate): {{ typeof(demoLocalDateValue.releaseDate) }}
68 |
69 |
76 |
DefaultValueAccessor(does not work)
77 |
78 |
85 |
86 |
Toggle disabled state
87 |
88 |
89 | <input type="text"
90 | name="version"
91 | [(ngModel)]="demoDefault.version">
92 |
93 | <input type="date"
94 | name="releaseDate"
95 | [(ngModel)]="demoDefault.releaseDate">
96 |
97 |
98 |
99 | DEBUG:
100 | {{ demoDefault | json }}
101 | typeof(releaseDate): {{ typeof(demoDefault.releaseDate) }}
102 |
103 |
Reactive Forms
2 |
3 |
6 |
IsoDateValueAccessor
7 |
8 |
15 |
16 |
Toggle disabled state
17 |
18 |
19 | <input type="text"
20 | formControlName="version">
21 |
22 | <input type="date"
23 | formControlName="releaseDate"
24 | useValueAsIso >
25 |
26 |
27 |
28 | DEBUG:
29 | {{ demoIsoDateValue | json }}
30 | typeof(releaseDate): {{ typeof(demoIsoDateValue.releaseDate) }}
31 |
32 |
39 |
LocalIsoDateValueAccessor
40 |
41 |
48 |
49 |
Toggle disabled state
50 |
51 |
52 | <input type="text"
53 | formControlName="version">
54 |
55 | <input type="date"
56 | formControlName="releaseDate"
57 | useValueAsLocalIso >
58 |
59 |
60 |
61 | DEBUG:
62 | {{ demoLocalIsoDateValue | json }}
63 | typeof(releaseDate): {{ typeof(demoLocalIsoDateValue.releaseDate) }}
64 |
65 |
70 |
DefaultValueAccessor(does not work)
71 |
72 |
79 |
80 |
Toggle disabled state
81 |
82 |
83 | <input type="text"
84 | formControlName="version">
85 |
86 | <input type="date"
87 | formControlName="releaseDate">
88 |
89 |
90 |
91 | DEBUG:
92 | {{ demoIsoDefault | json }}
93 | typeof(releaseDate): {{ typeof(demoIsoDefault.releaseDate) }}
94 |
95 |
Template-Driven Forms
2 |
3 |
6 |
IsoDateValueAccessor
7 |
8 |
15 |
16 |
Toggle disabled state
17 |
18 |
19 | <input type="text"
20 | name="version"
21 | [(ngModel)]="demoIsoDateValue.version">
22 |
23 | <input type="date"
24 | name="releaseDate"
25 | [(ngModel)]="demoIsoDateValue.releaseDate"
26 | useValueAsIso >
27 |
28 |
29 |
30 | DEBUG:
31 | {{ demoIsoDateValue | json }}
32 | typeof(releaseDate): {{ typeof(demoIsoDateValue.releaseDate) }}
33 |
34 |
42 |
LocalIsoDateValueAccessor
43 |
44 |
51 |
52 |
Toggle disabled state
53 |
54 |
55 | <input type="text"
56 | name="version"
57 | [(ngModel)]="demoLocalIsoDateValue.version">
58 |
59 | <input type="date"
60 | name="releaseDate"
61 | [(ngModel)]="demoLocalIsoDateValue.releaseDate"
62 | useValueAsLocalIso >
63 |
64 |
65 |
66 | DEBUG:
67 | {{ demoLocalIsoDateValue | json }}
68 | typeof(releaseDate): {{ typeof(demoLocalIsoDateValue.releaseDate) }}
69 |
70 |
75 |
DefaultValueAccessor(does not work)
76 |
77 |
84 |
85 |
Toggle disabled state
86 |
87 |
88 | <input type="text"
89 | name="version"
90 | [(ngModel)]="demoIsoDefault.version">
91 |
92 | <input type="date"
93 | name="releaseDate"
94 | [(ngModel)]="demoIsoDefault.releaseDate">
95 |
96 |
97 |
98 | DEBUG:
99 | {{ demoIsoDefault | json }}
100 | typeof(releaseDate): {{ typeof(demoIsoDefault.releaseDate) }}
101 |
102 |
7 | The orginal DateValueAccessor operates in UTC (Coordinated Universal Time).
8 | The HTML date input will use the UTC representation of a given Date Object.
9 | When you select a date it will output an UTC date with the time set to 00:00 (UTC).
12 | If you are unsure what to use, use the LocalDateValueAccessor and not the DateValueAccessor.
13 | Most users will expect the input field to correlate to their local clock.
14 |
15 |
`
16 | })
17 | export class ExplanationDateValueAccessorComponent {
18 | }
19 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/explanation-default-value-accessor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-explanation-default-value-accessor',
5 | template: `
6 |
7 | The DefaultValueAccessor from Angular will not work as expected.
8 | The HTML date input will not display the given Date Object – it's empty after load.
9 | When you select a date it will output as a simple string. Please note the typeof(releaseDate) after setting a value.
10 | This simple string contains only a date and no time.
11 |
`
12 | })
13 | export class ExplanationDefaultValueAccessorComponent {
14 | }
15 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/explanation-iso-date-value-accessor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-explanation-iso-date-value-accessor',
5 | template: `
6 |
7 | This directive gets and sets ISO 8601 formatted date strings in HTML date inputs.
8 | The handling of the dates is the same as for the DateValueAccessor.
9 | IsoDateValueAccessor operates in UTC (Coordinated Universal Time).
11 | The HTML date input will use the UTC representation of a given ISO 8601 formatted date string.
12 | When you select a date it will output an ISO-formatted string with the time set to 00:00 (UTC).
13 |
`
14 | })
15 | export class ExplanationIsoDateValueAccessorComponent {
16 | }
17 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/explanation-local-date-value-accessor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-explanation-local-date-value-accessor',
5 | template: `
6 |
7 | The improved LocalDateValueAccessor operates in your Local Time.
8 | The HTML date input will use the Local Time representation of a given the Date Object.
9 | When you select a date it will output a Local Date with the time set to 00:00 (Local Time).
10 |
`
11 | })
12 | export class ExplanationLocalDateValueAccessorComponent {
13 | }
14 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/explanation-local-iso-date-value-accessor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-explanation-local-iso-date-value-accessor',
5 | template: `
6 |
7 | This directive gets and sets ISO 8601 formatted date strings in HTML date inputs.
8 | The handling of the dates is the same as for the LocalDateValueAccessor.
9 | LocalIsoDateValueAccessor operates in your Local Time.
11 | The HTML date input will use the Local Time representation of a given ISO 8601 formatted date string.
12 | When you select a date it will output an ISO-formatted string with a time that equals to 00:00 (Local Time).
`
16 | })
17 | export class ExplanationLocalIsoDateValueAccessorComponent {
18 | }
19 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/release-with-iso-string.ts:
--------------------------------------------------------------------------------
1 | export class ReleaseWithIsoString {
2 |
3 | constructor(
4 | public version: string,
5 | public releaseDate: string) {
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/app/shared/release.ts:
--------------------------------------------------------------------------------
1 | export class Release {
2 |
3 | constructor(
4 | public version: string,
5 | public releaseDate: Date) {
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/.gitkeep
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/ie11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/ie11.png
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/reactive-does-not-work.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/reactive-does-not-work.gif
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/reactive-works-local.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/reactive-works-local.gif
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/reactive-works.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/reactive-works.gif
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/screenshot.png
--------------------------------------------------------------------------------
/workspace/projects/demo/src/assets/screenshot_simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/assets/screenshot_simple.png
--------------------------------------------------------------------------------
/workspace/projects/demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JohannesHoppe/angular-date-value-accessor/8a4caeb45bdacc45c3b523106f6ac42dc0389ca2/workspace/projects/demo/src/favicon.ico
--------------------------------------------------------------------------------
/workspace/projects/demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Angular: DateValueAccessor
6 | Loading...
21 | Fork me on GitHub
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 |
51 | /***************************************************************************************************
52 | * APPLICATION IMPORTS
53 | */
54 | import 'configurable-date-input-polyfill';
55 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Helvetica, Arial, sans-serif;
3 | }
4 |
5 | svg {
6 | position: absolute;
7 | top: 10px;
8 | left: 10px;
9 | }
10 |
11 | label {
12 | float: left;
13 | width: 200px;
14 | }
15 |
16 | input {
17 | display: block;
18 | margin: 5px;
19 | width: 220px;
20 | }
21 |
22 | app-root {
23 | margin-left: 120px;
24 | display:block;
25 | }
26 |
27 | pre {
28 | background-color: #f7f7f7;
29 | width: 400px;
30 | padding: 12px;
31 | }
32 |
33 | app-template-driven-form,
34 | app-template-driven-form-iso {
35 | float: left;
36 | width: 520px;
37 | }
38 |
39 | app-reactive-form,
40 | app-reactive-form-iso {
41 | float: left;
42 | width: 520px;
43 | }
44 |
45 | summary {
46 | cursor: pointer;
47 | padding: 2px;
48 | }
49 |
50 | summary:hover {
51 | color:rgb(85, 85, 85);
52 | }
53 |
54 | h1 {
55 | margin-left: 20px;
56 | }
57 |
58 | p {
59 | margin: 20px;
60 | }
61 |
62 | p.small {
63 | font-size: 0.8em;
64 | color: rgb(85, 85, 85);
65 | }
66 |
67 | .good,
68 | .bad {
69 | border: 1px solid transparent;
70 | border-radius: 4px;
71 | padding: 10px 15px 10px 25px;
72 | margin: 20px;
73 | height: 450px;
74 | }
75 |
76 | .good {
77 | background-color: #dff0d8;
78 | border-color: #d6e9c6;
79 | color: #3c763d;
80 | }
81 |
82 | .bad {
83 | background-color: #f2dede;
84 | border-color: #ebccd1;
85 | color: #a94442;
86 | }
87 |
88 | small {
89 | font-weight: normal;
90 | font-size: 0.8em;
91 | }
92 |
93 | .clearfix::after {
94 | display: block;
95 | content: "";
96 | clear: both;
97 | }
98 |
99 | /* fork on github badge */
100 |
101 | #forkongithub a {
102 | background: #C3002F;
103 | color: #fff;
104 | text-decoration: none;
105 | font-family: arial,sans-serif;
106 | text-align: center;
107 | font-weight: bold;
108 | padding: 5px 40px;
109 | font-size: 1rem;
110 | line-height: 2rem;
111 | position: relative;
112 | transition: 0.5s;
113 | }
114 |
115 | #forkongithub a:hover {
116 | background: gray;
117 | color: #fff;
118 | }
119 |
120 | #forkongithub a::before,
121 | #forkongithub a::after {
122 | content: "";
123 | width: 100%;
124 | display: block;
125 | position: absolute;
126 | top: 1px;
127 | left: 0;
128 | height: 1px;
129 | background: #fff;
130 | }
131 |
132 | #forkongithub a::after {
133 | bottom: 1px;
134 | top: auto;
135 | }
136 |
137 | @media screen and (min-width:800px) {
138 | #forkongithub {
139 | position: fixed;
140 | display: block;
141 | top: 0;
142 | right: 0;
143 | width: 200px;
144 | overflow: hidden;
145 | height: 200px;
146 | z-index: 9999;
147 | }
148 |
149 | #forkongithub a {
150 | width: 200px;
151 | position: absolute;
152 | top: 60px;
153 | right: -60px;
154 | transform: rotate(45deg);
155 | -webkit-transform: rotate(45deg);
156 | -ms-transform: rotate(45deg);
157 | -moz-transform: rotate(45deg);
158 | -o-transform: rotate(45deg);
159 | box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
160 | }
161 | }
162 |
163 |
--------------------------------------------------------------------------------
/workspace/projects/demo/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/workspace/projects/demo/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/app",
6 | "types": [],
7 | "target": "es2020"
8 | },
9 | "files": [
10 | "src/main.ts",
11 | "src/polyfills.ts"
12 | ],
13 | "include": [
14 | "src/**/*.d.ts"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/workspace/projects/demo/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/workspace/projects/demo/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/workspace/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "moduleResolution": "node",
11 | "importHelpers": true,
12 | "target": "es2020",
13 | "module": "es2020",
14 | "lib": [
15 | "es2018",
16 | "dom"
17 | ],
18 | "paths": {
19 | "date-value-accessor": [
20 | "dist/date-value-accessor/date-value-accessor",
21 | "dist/date-value-accessor"
22 | ]
23 | }
24 | },
25 | "angularCompilerOptions": {
26 | "strictTemplates": true
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/workspace/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "align": {
8 | "options": [
9 | "parameters",
10 | "statements"
11 | ]
12 | },
13 | "array-type": false,
14 | "arrow-return-shorthand": true,
15 | "curly": true,
16 | "deprecation": {
17 | "severity": "warning"
18 | },
19 | "eofline": true,
20 | "import-blacklist": [
21 | true,
22 | "rxjs/Rx"
23 | ],
24 | "import-spacing": true,
25 | "indent": {
26 | "options": [
27 | "spaces"
28 | ]
29 | },
30 | "max-classes-per-file": false,
31 | "max-line-length": [
32 | true,
33 | 140
34 | ],
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-console": [
47 | true,
48 | "debug",
49 | "info",
50 | "time",
51 | "timeEnd",
52 | "trace"
53 | ],
54 | "no-empty": false,
55 | "no-inferrable-types": [
56 | true,
57 | "ignore-params"
58 | ],
59 | "no-non-null-assertion": true,
60 | "no-redundant-jsdoc": true,
61 | "no-switch-case-fall-through": true,
62 | "no-var-requires": false,
63 | "object-literal-key-quotes": [
64 | true,
65 | "as-needed"
66 | ],
67 | "quotemark": [
68 | true,
69 | "single"
70 | ],
71 | "semicolon": {
72 | "options": [
73 | "always"
74 | ]
75 | },
76 | "space-before-function-paren": {
77 | "options": {
78 | "anonymous": "never",
79 | "asyncArrow": "always",
80 | "constructor": "never",
81 | "method": "never",
82 | "named": "never"
83 | }
84 | },
85 | "typedef": [
86 | true,
87 | "call-signature"
88 | ],
89 | "typedef-whitespace": {
90 | "options": [
91 | {
92 | "call-signature": "nospace",
93 | "index-signature": "nospace",
94 | "parameter": "nospace",
95 | "property-declaration": "nospace",
96 | "variable-declaration": "nospace"
97 | },
98 | {
99 | "call-signature": "onespace",
100 | "index-signature": "onespace",
101 | "parameter": "onespace",
102 | "property-declaration": "onespace",
103 | "variable-declaration": "onespace"
104 | }
105 | ]
106 | },
107 | "variable-name": {
108 | "options": [
109 | "ban-keywords",
110 | "check-format",
111 | "allow-pascal-case"
112 | ]
113 | },
114 | "whitespace": {
115 | "options": [
116 | "check-branch",
117 | "check-decl",
118 | "check-operator",
119 | "check-separator",
120 | "check-type",
121 | "check-typecast"
122 | ]
123 | },
124 | "component-class-suffix": true,
125 | "contextual-lifecycle": true,
126 | "directive-class-suffix": true,
127 | "no-conflicting-lifecycle": true,
128 | "no-host-metadata-property": true,
129 | "no-input-rename": true,
130 | "no-inputs-metadata-property": true,
131 | "no-output-native": true,
132 | "no-output-on-prefix": true,
133 | "no-output-rename": true,
134 | "no-outputs-metadata-property": true,
135 | "template-banana-in-box": true,
136 | "template-no-negated-async": true,
137 | "use-lifecycle-interface": true,
138 | "use-pipe-transform-interface": true
139 | }
140 | }
141 |
--------------------------------------------------------------------------------