diff --git a/PLAYBOOK.md b/PLAYBOOK.md index 95c9edf66..8c28a7267 100644 --- a/PLAYBOOK.md +++ b/PLAYBOOK.md @@ -120,14 +120,14 @@ ng update --all # also run `npm outdated` and update versions in package.json then run `npm install` # generate webapp app -ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --e2e-test-runner=cypress --tags=app-module --dry-run +ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --e2e-test-runner=cypress --tags=app-module -d # or with ivy renderer -ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --e2e-test-runner=cypress --tags=app-module --dry-run -- --experimental-ivy +ng g app webapp --routing --style=scss --prefix=ngx --unit-test-runner=jest --e2e-test-runner=cypress --tags=app-module -d -- --experimental-ivy # generate api app with nestjs -ng g node-app api --framework=express --unit-test-runner=jest --tags=api-module --dry-run +ng g node-app api --framework=express --unit-test-runner=jest --tags=api-module -d # generate backend app with express -ng g node-app backend --framework=express --unit-test-runner=jest --tags=api-module --dry-run +ng g node-app backend --framework=express --unit-test-runner=jest --tags=api-module -d ``` #### Dependencies @@ -156,9 +156,9 @@ npm i angular-in-memory-web-api npm i angular-oauth2-oidc # Add NGXS -ng add @ngxs/schematics +ng add @ngxs/schematics # makesure "defaultCollection" is still "@nrwl/schematics" in angular.json # or add NGXS manually -npm i @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,devtools-plugin} +npm i @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin} npm i -D @ngxs/schematics # Add formly @@ -228,7 +228,7 @@ ng update @nrwl/schematics --force #### Generate Artifacts -> Add `--dry-run` option to following commands to see which artifacts will be created, without actually creating them. +> Add `--dry-run` or `-d` option to following commands to see which artifacts will be created, without actually creating them. ```bash @@ -240,26 +240,26 @@ ng g lib experiments --routing --lazy --prefix=ngx --parent-module=libs/dashb ng g lib widgets --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --unit-test-runner=jest --tags=child-module ng g lib grid --routing --lazy --prefix=ngx --parent-module=libs/dashboard/src/lib/dashboard.module.ts --unit-test-runner=jest --tags=child-module -ng g lib animations --module false -tags=utils --unit-test-runner=jest --dry-run -ng g lib Tree --module false --publishable=true --tags=utils --unit-test-runner=jest --dry-run -ng g lib utils --module false --tags=utils --unit-test-runner=jest --dry-run +ng g lib animations --module false -tags=utils --unit-test-runner=jest -d +ng g lib Tree --module false --publishable=true --tags=utils --unit-test-runner=jest -d +ng g lib utils --module false --tags=utils --unit-test-runner=jest -d # system wide models -ng g lib models --module false --tags=utils --unit-test-runner=jest --dry-run +ng g lib models --module false --tags=utils --unit-test-runner=jest -d # add `core` module which will be only inported into root/app module. -ng g lib core --prefix=ngx --tags=core-module --unit-test-runner=jest --dry-run +ng g lib core --prefix=ngx --tags=core-module --unit-test-runner=jest -d # add global services for `core` Module -ng g service services/InMemoryData --project=core --spec=false --dry-run -ng g service services/PageTitle --project=core --dry-run -ng g service services/ServiceWorker --project=core --dry-run -ng g service services/MediaQuery --project=core --dry-run -ng g service services/DeepLink --project=core --dry-run -ng g service services/Feature --project=core --dry-run -ng g service services/GoogleAnalytics --project=core --dry-run -ng g service PushNotification --project=core --dry-run +ng g service services/InMemoryData --project=core --spec=false -d +ng g service services/PageTitle --project=core -d +ng g service services/ServiceWorker --project=core -d +ng g service services/MediaQuery --project=core -d +ng g service services/DeepLink --project=core -d +ng g service services/Feature --project=core -d +ng g service services/GoogleAnalytics --project=core -d +ng g service PushNotification --project=core -d # `material` module to encapulate material libs which is impoted into any `Lazy-loaded Feature Modules` that need material components -ng g lib material --prefix=ngx --spec=false --tags=shared-module --unit-test-runner=jest --dry-run +ng g lib material --prefix=ngx --spec=false --tags=shared-module --unit-test-runner=jest -d # add `shared` module which will encapsulate angular and 3rd party modules, needed for all `Lazy-loaded Feature Modules` ng g lib shared --prefix=ngx --tags=shared-module --unit-test-runner=jest @@ -272,146 +272,144 @@ ng g component containers/entity --project=shared --skip-import ng g component containers/entityForm --project=shared --skip-import # generate containers for `NotFound` Module -ng g component containers/NotFound --project=not-found --dry-run +ng g component containers/NotFound --project=not-found -d ### generate `Reusable lib Modules` # generate components for `AppConfirm` Module -ng g lib AppConfirm --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run -ng g component AppConfirm --project=app-confirm --flat --dry-run -ng g service AppConfirm --project=app-confirm --spec=false --dry-run +ng g lib AppConfirm --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -d +ng g component AppConfirm --project=app-confirm --flat -d +ng g service AppConfirm --project=app-confirm --spec=false -d # generate components for `Draggable` Module ng g lib Draggable --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g directive directives/Draggable --project=draggable --export=true --dry-run +ng g directive directives/Draggable --project=draggable --export=true -d # generate components for `Breadcrumbs` Module ng g lib Breadcrumbs --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component breadcrumbs --project=breadcrumbs --flat --dry-run -ng g service breadcrumbs --project=breadcrumbs --dry-run +ng g component breadcrumbs --project=breadcrumbs --flat -d +ng g service breadcrumbs --project=breadcrumbs -d # generate components for `ScrollToTop` Module ng g lib ScrollToTop --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component ScrollToTop --project=scroll-to-top --flat --dry-run +ng g component ScrollToTop --project=scroll-to-top --flat -d ng g lib scrollbar --prefix=ngx --tags=public-module --publishable=true # generate components for `ContextMenu` Module ng g lib ContextMenu --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component ContextMenu --project=context-menu --flat --dry-run -ng g directive ContextMenuTrigger --project=context-menu --flat --dry-run +ng g component ContextMenu --project=context-menu --flat -d +ng g directive ContextMenuTrigger --project=context-menu --flat -d # generate components, services for `ThemePicker` Module ng g lib ThemePicker --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component ThemePicker --project=theme-picker --flat --dry-run -ng g service ThemeStorage --project=theme-picker --dry-run -ng g service StyleManager --project=theme-picker --dry-run +ng g component ThemePicker --project=theme-picker --flat -d +ng g service ThemeStorage --project=theme-picker -d +ng g service StyleManager --project=theme-picker -d # generate components for `Notifications` Module -ng g lib Notifications --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run -ng g component notifications --project=notifications --flat --dry-run -ng g class notification --type=model --project=notifications --dry-run -ng g service notifications --project=notifications --dry-run +ng g lib Notifications --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -d +ng g component notifications --project=notifications --flat -d +ng g class notification --type=model --project=notifications -d +ng g service notifications --project=notifications -d # generate components for `Quickpanel` Module ng g lib Quickpanel --prefix=ngx --tags=private-module --unit-test-runner=jest -ng g component Quickpanel --project=quickpanel --flat --dry-run +ng g component Quickpanel --project=quickpanel --flat -d # generate components for `LoadingOverlay` Module ng g lib LoadingOverlay --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component LoadingOverlay --project=loading-overlay --flat --dry-run +ng g component LoadingOverlay --project=loading-overlay --flat -d # generate components for `svgViewer` Module ng g lib svgViewer --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component svgViewer --project=svg-viewer --flat --dry-run +ng g component svgViewer --project=svg-viewer --flat -d # generate components for `led` Module ng g lib led --prefix=ngx --tags=public-module --publishable=true -ng g component led --project=led --flat --dry-run +ng g component led --project=led --flat -d # generate components for `chatBox` Module -ng g lib chatBox --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest --dry-run -ng g component chatBox --project=chat-box --flat --dry-run -ng g component components/typingIndicator --project=chat-box --dry-run -ng g component components/chatCard --project=chat-box --dry-run -ng g component components/TextToSpeechPreferences --project=chat-box --dry-run -ng g service services/nlp --project=chat-box --dry-run -ng g service services/SpeechToText --project=chat-box --dry-run -ng g service services/TextToSpeech --project=chat-box --dry-run -ng g service services/chat --project=chat-box --dry-run +ng g lib chatBox --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -d +ng g component chatBox --project=chat-box --flat -d +ng g component components/typingIndicator --project=chat-box -d +ng g component components/chatCard --project=chat-box -d +ng g component components/TextToSpeechPreferences --project=chat-box -d +ng g service services/nlp --project=chat-box -d +ng g service services/SpeechToText --project=chat-box -d +ng g service services/TextToSpeech --project=chat-box -d +ng g service services/chat --project=chat-box -d # generate components for `socketioPlugin` Module -ng g lib socketioPlugin --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest --dry-run -ng g service socketioSubject --project=socketio-plugin --dry-run +ng g lib socketioPlugin --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest -d +ng g service socketioSubject --project=socketio-plugin -d # generate components for `openTracing` Module -ng g lib openTracing --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest --dry-run -ng g service services/ZipkinTracing --project=open-tracing --dry-run -ng g interceptor interceptors/tracing --project=open-tracing --dry-run +ng g lib openTracing --prefix=ngx --tags=public-module --publishable=true --spec=false --unit-test-runner=jest -d +ng g service services/ZipkinTracing --project=open-tracing -d +ng g interceptor interceptors/tracing --project=open-tracing -d # generate components for `jsonDiff` Module ng g lib jsonDiff --prefix=ngx --tags=public-module --publishable=true --unit-test-runner=jest -ng g component jsonDiff --project=json-diff --flat --dry-run -ng g component jsonDiffTree --project=json-diff --flat --dry-run +ng g component jsonDiff --project=json-diff --flat -d +ng g component jsonDiffTree --project=json-diff --flat -d # generate components for `clap` Module ng g lib clap --prefix=ngx --tags=public-module --spec=false --publishable=true --unit-test-runner=jest -ng g component clap --project=clap -s -t --spec=false --export --flat --dry-run -ng g component components/counterBubble --project=clap -s -t --spec=false --flat --dry-run -ng g component components/totalCounter --project=clap -s -t --spec=false --flat --dry-run -ng g component components/fab --project=clap -s -t --spec=false --flat --dry-run +ng g component clap --project=clap -s -t --spec=false --export --flat -d +ng g component components/counterBubble --project=clap -s -t --spec=false --flat -d +ng g component components/totalCounter --project=clap -s -t --spec=false --flat -d +ng g component components/fab --project=clap -s -t --spec=false --flat -d # generate components for `ngx-utils` Module ng g lib ngxUtils --prefix=ngx --tags=public-module,utils --module false --publishable=true --unit-test-runner=jest -ng g module pipes/truncate --project=ngx-utils --spec=false --dry-run -ng g pipe pipes/truncate/Characters --project=ngx-utils --module=truncate --export --dry-run -ng g pipe pipes/truncate/Words --project=ngx-utils --module=truncate --export --dry-run -ng g module pipes/helper --project=ngx-utils --spec=false --dry-run -ng g pipe pipes/helper/filter --project=ngx-utils --module=helper --export --dry-run -ng g pipe pipes/helper/groupBy --project=ngx-utils --module=helper --export --dry-run -ng g pipe pipes/helper/safeHtml --project=ngx-utils --module=helper --export --dry-run -ng g module directives/ngLet --project=ngx-utils --spec=false --dry-run -ng g directive directives/ng-let/ngLet --selector=ngLet --project=ngx-utils --module=ng-let --export --dry-run -ng g module directives/routerLinkMatch --project=ngx-utils --spec=false --dry-run -ng g directive directives/router-link-match/RouterLinkMatch --selector=routerLinkMatch --project=ngx-utils --module=router-link-match --export --dry-run - -ng g module pipes/dateFns --project=ngx-utils --spec=false --dry-run -ng g service pipes/date-fns/DateFnsConfiguration --project=ngx-utils --module=date-fns --spec=false --dry-run -ng g pipe pipes/date-fns/FormatDistanceToNow --project=ngx-utils --module=date-fns --export --dry-run -amTimeAgo - -TimeAgoPipe - +ng g module pipes/truncate --project=ngx-utils --spec=false -d +ng g pipe pipes/truncate/Characters --project=ngx-utils --module=truncate --export -d +ng g pipe pipes/truncate/Words --project=ngx-utils --module=truncate --export -d +ng g module pipes/helper --project=ngx-utils --spec=false -d +ng g pipe pipes/helper/filter --project=ngx-utils --module=helper --export -d +ng g pipe pipes/helper/groupBy --project=ngx-utils --module=helper --export -d +ng g pipe pipes/helper/safeHtml --project=ngx-utils --module=helper --export -d +ng g module directives/ngLet --project=ngx-utils --spec=false -d +ng g directive directives/ng-let/ngLet --selector=ngLet --project=ngx-utils --module=ng-let --export -d +ng g module directives/routerLinkMatch --project=ngx-utils --spec=false -d +ng g directive directives/router-link-match/RouterLinkMatch --selector=routerLinkMatch --project=ngx-utils --module=router-link-match --export -d +ng g module pipes/dateFns --project=ngx-utils --spec=false -d +ng g service pipes/date-fns/DateFnsConfiguration --project=ngx-utils --module=date-fns --spec=false -d +ng g pipe pipes/date-fns/FormatTimeInWords --project=ngx-utils --module=date-fns --export -d +ng g module directives/inViewport --project=ngx-utils --spec=false -d +ng g directive directives/in-viewport/inViewport --selector=inViewport --project=ngx-utils --module=in-viewport --export -d +ng g service directives/in-viewport/Viewport --project=ngx-utils --module=in-viewport -d # generate components for `toolbar` Module -ng g lib toolbar --prefix=ngx --tags=private-module --unit-test-runner=jest --dry-run -ng g component toolbar --project=toolbar --flat --dry-run -ng g component components/search --project=toolbar --dry-run +ng g lib toolbar --prefix=ngx --tags=private-module --unit-test-runner=jest -d +ng g component toolbar --project=toolbar --flat -d +ng g component components/search --project=toolbar -d ng g component components/searchBar --project=toolbar ng g component components/UserMenu --project=toolbar -ng g component components/FullscreenToggle --project=toolbar --dry-run -ng g component components/SidenavMobileToggle --project=toolbar --dry-run -ng g component components/QuickpanelToggle --project=toolbar --dry-run +ng g component components/FullscreenToggle --project=toolbar -d +ng g component components/SidenavMobileToggle --project=toolbar -d +ng g component components/QuickpanelToggle --project=toolbar -d # generate components for `sidenav` Module -ng g lib sidenav --prefix=ngx --tags=private-module --unit-test-runner=jest --dry-run -ng g component sidenav --project=sidenav --flat --dry-run -ng g component components/sidenavItem --project=sidenav --dry-run -ng g directive IconSidenav --project=sidenav --dry-run +ng g lib sidenav --prefix=ngx --tags=private-module --unit-test-runner=jest -d +ng g component sidenav --project=sidenav --flat -d +ng g component components/sidenavItem --project=sidenav -d +ng g directive IconSidenav --project=sidenav -d # generate components for `auth` Module -ng g lib auth --prefix=ngx --tags=private-module,core-module --prefix=ngx --style=scss --unit-test-runner=jest --dry-run -ng g component components/login --project=auth --dry-run -ng g @ngxs/schematics:store --name=auth --spec --project=auth --dry-run +ng g lib auth --prefix=ngx --tags=private-module,core-module --prefix=ngx --style=scss --unit-test-runner=jest -d +ng g component components/login --project=auth -d +ng g @ngxs/schematics:store --name=auth --spec --project=auth -d # generate components for `navigator` Module -ng g lib navigator --prefix=ngx --tags=private-module,core-module --unit-test-runner=jest --dry-run -ng g service services/menu --project=navigator --dry-run -ng g class models/menuItem --project=navigator --type=model --dry-run -ng g class state/menu --project=navigator --type=state --dry-run +ng g lib navigator --prefix=ngx --tags=private-module,core-module --unit-test-runner=jest -d +ng g service services/menu --project=navigator -d +ng g class models/menuItem --project=navigator --type=model -d +ng g class state/menu --project=navigator --type=state -d # generate containers, components for `home` Module ng g component components/header --project=home @@ -421,42 +419,42 @@ ng g component containers/blog --project=home ng g component containers/about --project=home # generate containers, components for `dashboard` Module -ng g component components/rainbow --project=dashboard --dry-run -ng g component containers/dashboardLayout --project=dashboard --dry-run -ng g component containers/overview --project=dashboard --dry-run -ng g component containers/profile --project=dashboard --dry-run -ng g component containers/settings --project=dashboard --dry-run +ng g component components/rainbow --project=dashboard -d +ng g component containers/dashboardLayout --project=dashboard -d +ng g component containers/overview --project=dashboard -d +ng g component containers/profile --project=dashboard -d +ng g component containers/settings --project=dashboard -d # generate containers, components for `widgets` Module -ng g component containers/wizdash --project=widgets --dry-run +ng g component containers/wizdash --project=widgets -d # generate containers, components for `grid` Module -ng g component containers/AccountsTable --project=grid --dry-run -ng g component components/AccountDetail --project=grid --dry-run -ng g component components/AccountEdit --project=grid --dry-run -ng g class models/account --type=model --project=grid --dry-run -ng g service services/account --project=grid --dry-run -ng g component containers/AccountsGridList --project=grid --dry-run +ng g component containers/AccountsTable --project=grid -d +ng g component components/AccountDetail --project=grid -d +ng g component components/AccountEdit --project=grid -d +ng g class models/account --type=model --project=grid -d +ng g service services/account --project=grid -d +ng g component containers/AccountsGridList --project=grid -d # generate containers, components for `experiments` Module -ng g component containers/animations --project=experiments --dry-run -ng g component components/hammerCard --project=experiments --dry-run -ng g directive components/Hammertime/Hammertime --project=experiments --dry-run -ng g component containers/ContextMenu --project=experiments --dry-run -ng g component containers/FileUpload --project=experiments --dry-run -ng g component containers/virtualScroll --project=experiments --dry-run -ng g component containers/StickyTable --project=experiments --dry-run -ng g component containers/clapButton --project=experiments -s -t --spec=false --dry-run -ng g component containers/knobDemo --project=experiments --dry-run -ng g component containers/ledDemo --project=experiments --dry-run -ng g component containers/ImageComp --project=experiments --dry-run -ng g component containers/layout --project=experiments --dry-run -ng g component components/card --project=experiments --dry-run - +ng g component containers/animations --project=experiments -d +ng g component components/hammerCard --project=experiments -d +ng g directive components/Hammertime/Hammertime --project=experiments -d +ng g component containers/ContextMenu --project=experiments -d +ng g component containers/FileUpload --project=experiments -d +ng g component containers/virtualScroll --project=experiments -d +ng g component containers/StickyTable --project=experiments -d +ng g component containers/clapButton --project=experiments -s -t --spec=false -d +ng g component containers/knobDemo --project=experiments -d +ng g component containers/ledDemo --project=experiments -d +ng g component containers/ImageComp --project=experiments -d +ng g component containers/layout --project=experiments -d +ng g component components/card --project=experiments -d +ng g component containers/viewport --project=experiments --spec=false -d # generate components for `ImageComparison` Module -ng g lib ImageComparison --prefix=ngx --tags=public-module --spec=false --publishable=true --dry-run -ng g component ImageComparison --project=image-comparison --export --flat --dry-run +ng g lib ImageComparison --prefix=ngx --tags=public-module --spec=false --publishable=true -d +ng g component ImageComparison --project=image-comparison --export --flat -d ``` #### Workspace Schematics @@ -466,7 +464,7 @@ ng g component ImageComparison --project=image-comparison --export --flat --dry- ng g workspace-schematic store # run workspace-schematic `store` # *** always delete ./dist folder when you change schematic implementation *** -npm run workspace-schematic store models/sumoDemo -- --project=grid --dry-run +npm run workspace-schematic store models/sumoDemo -- --project=grid -d ``` ### Install diff --git a/angular.json b/angular.json index caae51f90..0bd66e1e3 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,9 @@ "apps/webapp/src/silent-refresh.html" ], "stylePreprocessorOptions": { - "includePaths": ["apps/webapp/src/styles"] + "includePaths": [ + "apps/webapp/src/styles" + ] }, "styles": [ "apps/webapp/src/styles.scss", @@ -172,8 +174,14 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["apps/webapp/tsconfig.app.json", "apps/webapp/tsconfig.spec.json"], - "exclude": ["**/node_modules/**", "**/*.json"] + "tsConfig": [ + "apps/webapp/tsconfig.app.json", + "apps/webapp/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**", + "**/*.json" + ] } }, "test": { @@ -207,7 +215,10 @@ "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "apps/webapp-e2e/tsconfig.e2e.json", - "exclude": ["**/node_modules/**", "**/*.json"] + "exclude": [ + "**/node_modules/**", + "**/*.json" + ] } } } @@ -225,7 +236,9 @@ "sourceMap": true, "main": "apps/api/src/main.ts", "tsConfig": "apps/api/tsconfig.app.json", - "assets": ["apps/api/src/assets"], + "assets": [ + "apps/api/src/assets" + ], "showCircularDependencies": false }, "configurations": { @@ -256,8 +269,14 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["apps/api/tsconfig.app.json", "apps/api/tsconfig.spec.json"], - "exclude": ["**/node_modules/**", "**/*.json"] + "tsConfig": [ + "apps/api/tsconfig.app.json", + "apps/api/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**", + "**/*.json" + ] } }, "test": { @@ -285,7 +304,9 @@ "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "apps/api-e2e/tsconfig.e2e.json", - "exclude": ["**/node_modules/**"] + "exclude": [ + "**/node_modules/**" + ] } } } @@ -326,8 +347,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["apps/backend/tsconfig.app.json", "apps/backend/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "apps/backend/tsconfig.app.json", + "apps/backend/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -348,8 +374,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/models/tsconfig.lib.json", "libs/models/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/models/tsconfig.lib.json", + "libs/models/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -371,8 +402,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/navigator/tsconfig.lib.json", "libs/navigator/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/navigator/tsconfig.lib.json", + "libs/navigator/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -401,8 +437,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/socketio-plugin/tsconfig.lib.json", "libs/socketio-plugin/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/socketio-plugin/tsconfig.lib.json", + "libs/socketio-plugin/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -431,8 +472,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/tree/tsconfig.lib.json", "libs/tree/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/tree/tsconfig.lib.json", + "libs/tree/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -454,8 +500,14 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/home/tsconfig.lib.json", "libs/home/tsconfig.spec.json"], - "exclude": ["**/node_modules/**", "**/*.json"] + "tsConfig": [ + "libs/home/tsconfig.lib.json", + "libs/home/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**", + "**/*.json" + ] } }, "test": { @@ -477,8 +529,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/dashboard/tsconfig.lib.json", "libs/dashboard/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/dashboard/tsconfig.lib.json", + "libs/dashboard/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -500,8 +557,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/not-found/tsconfig.lib.json", "libs/not-found/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/not-found/tsconfig.lib.json", + "libs/not-found/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -523,8 +585,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/experiments/tsconfig.lib.json", "libs/experiments/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/experiments/tsconfig.lib.json", + "libs/experiments/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -546,8 +613,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/widgets/tsconfig.lib.json", "libs/widgets/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/widgets/tsconfig.lib.json", + "libs/widgets/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -569,8 +641,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/material/tsconfig.lib.json", "libs/material/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/material/tsconfig.lib.json", + "libs/material/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -592,8 +669,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/animations/tsconfig.lib.json", "libs/animations/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/animations/tsconfig.lib.json", + "libs/animations/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -615,8 +697,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/utils/tsconfig.lib.json", "libs/utils/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/utils/tsconfig.lib.json", + "libs/utils/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -638,8 +725,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/auth/tsconfig.lib.json", "libs/auth/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/auth/tsconfig.lib.json", + "libs/auth/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -661,8 +753,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/shared/tsconfig.lib.json", "libs/shared/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/shared/tsconfig.lib.json", + "libs/shared/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -691,8 +788,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/app-confirm/tsconfig.lib.json", "libs/app-confirm/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/app-confirm/tsconfig.lib.json", + "libs/app-confirm/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -721,8 +823,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/draggable/tsconfig.lib.json", "libs/draggable/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/draggable/tsconfig.lib.json", + "libs/draggable/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -751,8 +858,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/breadcrumbs/tsconfig.lib.json", "libs/breadcrumbs/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/breadcrumbs/tsconfig.lib.json", + "libs/breadcrumbs/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -781,8 +893,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/scroll-to-top/tsconfig.lib.json", "libs/scroll-to-top/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/scroll-to-top/tsconfig.lib.json", + "libs/scroll-to-top/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -811,8 +928,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/scrollbar/tsconfig.lib.json", "libs/scrollbar/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/scrollbar/tsconfig.lib.json", + "libs/scrollbar/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -841,8 +963,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/context-menu/tsconfig.lib.json", "libs/context-menu/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/context-menu/tsconfig.lib.json", + "libs/context-menu/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -871,8 +998,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/theme-picker/tsconfig.lib.json", "libs/theme-picker/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/theme-picker/tsconfig.lib.json", + "libs/theme-picker/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -894,8 +1026,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/quickpanel/tsconfig.lib.json", "libs/quickpanel/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/quickpanel/tsconfig.lib.json", + "libs/quickpanel/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -924,8 +1061,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/svg-viewer/tsconfig.lib.json", "libs/svg-viewer/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/svg-viewer/tsconfig.lib.json", + "libs/svg-viewer/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -954,8 +1096,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/led/tsconfig.lib.json", "libs/led/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/led/tsconfig.lib.json", + "libs/led/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -984,8 +1131,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/chat-box/tsconfig.lib.json", "libs/chat-box/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/chat-box/tsconfig.lib.json", + "libs/chat-box/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1014,8 +1166,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/json-diff/tsconfig.lib.json", "libs/json-diff/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/json-diff/tsconfig.lib.json", + "libs/json-diff/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1037,8 +1194,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/toolbar/tsconfig.lib.json", "libs/toolbar/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/toolbar/tsconfig.lib.json", + "libs/toolbar/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1060,8 +1222,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/sidenav/tsconfig.lib.json", "libs/sidenav/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/sidenav/tsconfig.lib.json", + "libs/sidenav/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1090,8 +1257,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/loading-overlay/tsconfig.lib.json", "libs/loading-overlay/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/loading-overlay/tsconfig.lib.json", + "libs/loading-overlay/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1113,8 +1285,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/grid/tsconfig.lib.json", "libs/grid/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/grid/tsconfig.lib.json", + "libs/grid/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1143,8 +1320,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/notifications/tsconfig.lib.json", "libs/notifications/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/notifications/tsconfig.lib.json", + "libs/notifications/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1166,8 +1348,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/core/tsconfig.lib.json", "libs/core/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/core/tsconfig.lib.json", + "libs/core/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1196,8 +1383,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/clap/tsconfig.lib.json", "libs/clap/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/clap/tsconfig.lib.json", + "libs/clap/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1226,8 +1418,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/image-comparison/tsconfig.lib.json", "libs/image-comparison/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/image-comparison/tsconfig.lib.json", + "libs/image-comparison/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { @@ -1256,8 +1453,13 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["libs/ngx-utils/tsconfig.lib.json", "libs/ngx-utils/tsconfig.spec.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "libs/ngx-utils/tsconfig.lib.json", + "libs/ngx-utils/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "test": { diff --git a/apps/webapp/src/polyfills.ts b/apps/webapp/src/polyfills.ts index a0b983e95..38b562a45 100644 --- a/apps/webapp/src/polyfills.ts +++ b/apps/webapp/src/polyfills.ts @@ -82,3 +82,6 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. // Add global to window, assigning the value of window itself. (window as any).global = window; import 'core-js/es7/array'; + +/* Polyfill for IntersectionObserver */ +import 'intersection-observer'; diff --git a/libs/core/src/lib/menu-data.ts b/libs/core/src/lib/menu-data.ts index 65a5404c6..e4040a81c 100644 --- a/libs/core/src/lib/menu-data.ts +++ b/libs/core/src/lib/menu-data.ts @@ -34,17 +34,17 @@ export const defaultMenu: MenuItem[] = [ }, { name: 'Experiments', - icon: 'pie_chart_outlined', + icon: 'developer_board', disabled: false, children: [ { name: 'Animations', - icon: 'view_list', + icon: 'screen_rotation', link: '/dashboard/experiments/animations', }, { name: 'Upload', - icon: 'directions', + icon: 'backup', link: '/dashboard/experiments/file-upload', }, { @@ -64,7 +64,7 @@ export const defaultMenu: MenuItem[] = [ }, { name: 'Knob', - icon: 'directions', + icon: 'rotate_right', link: '/dashboard/experiments/knob', }, { @@ -72,6 +72,11 @@ export const defaultMenu: MenuItem[] = [ icon: 'apps', link: '/dashboard/experiments/layout', }, + { + name: 'Viewport', + icon: 'view_carousel', + link: '/dashboard/experiments/viewport', + }, // { // name: 'Microinteractions', // icon: 'casino', diff --git a/libs/core/src/lib/services/feature.service.ts b/libs/core/src/lib/services/feature.service.ts index 2e2b9f1a2..e52ce60db 100644 --- a/libs/core/src/lib/services/feature.service.ts +++ b/libs/core/src/lib/services/feature.service.ts @@ -22,6 +22,7 @@ export enum BrowserFeatureKey { WebBluetoothAPI = 'Web Bluetooth', SpeechSynthesis = 'Speech Synthesis', SpeechRecognition = 'Speech Recognition', + IntersectionObserver = 'Intersection Observer', } export class BrowserFeature { @@ -63,6 +64,7 @@ export class FeatureService { 'mozSpeechRecognition' in this.window || 'msSpeechRecognition' in this.window || 'oSpeechRecognition' in this.window, + [BrowserFeatureKey.IntersectionObserver]: 'IntersectionObserver' in this.window, }; } diff --git a/libs/dashboard/src/lib/containers/overview/overview.component.html b/libs/dashboard/src/lib/containers/overview/overview.component.html index 422207a86..9e9a1cc17 100644 --- a/libs/dashboard/src/lib/containers/overview/overview.component.html +++ b/libs/dashboard/src/lib/containers/overview/overview.component.html @@ -13,6 +13,15 @@
Animations
+
+ Viewport +
+
+ Knob +
+
+ Micro Interactions +
Widgets
diff --git a/libs/experiments/src/lib/containers/viewport/viewport.component.html b/libs/experiments/src/lib/containers/viewport/viewport.component.html new file mode 100644 index 000000000..90b1288b2 --- /dev/null +++ b/libs/experiments/src/lib/containers/viewport/viewport.component.html @@ -0,0 +1,38 @@ +
+

Scroll to load more images

+

+ Total images displayed: {{ totalImagesShown }} +

+ Picture courtesy: Unsplash +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
diff --git a/libs/experiments/src/lib/containers/viewport/viewport.component.scss b/libs/experiments/src/lib/containers/viewport/viewport.component.scss new file mode 100644 index 000000000..e139a4893 --- /dev/null +++ b/libs/experiments/src/lib/containers/viewport/viewport.component.scss @@ -0,0 +1,59 @@ +a { + text-decoration: none; +} + +.static-header { + position: fixed; + z-index: 1000; + background: #eee; + text-align: center; + width: 100%; + + padding: 10px; +} + +.images { + padding-top: 110px; + left: 0; + right: 0; + text-align: center; +} + +.images img { + max-width: 500px; +} + +.images .image-container, .images img { + height: 350px; +} + +// animation demo + +.cowboy.fancy { + animation: anim1 .7s ease-out; +} +.chef.fancy { + animation: anim2 .7s ease-out; +} + +@keyframes anim1 { + 0% { + opacity: 0; + transform: translateX(-30rem) rotate(-45deg); + } + 100% { + opacity: 1; + transform: scale(1) rotate(0deg); + } +} + +@keyframes anim2 { + 0% { + opacity: 0; + transform: translateX(30rem) rotate(45deg); + } + 100% { + opacity: 1; + transform: scale(1) rotate(0deg); + } +} diff --git a/libs/experiments/src/lib/containers/viewport/viewport.component.ts b/libs/experiments/src/lib/containers/viewport/viewport.component.ts new file mode 100644 index 000000000..6b093b0e6 --- /dev/null +++ b/libs/experiments/src/lib/containers/viewport/viewport.component.ts @@ -0,0 +1,99 @@ +import { Component, OnInit } from '@angular/core'; + +interface ImageItem { + id: number; + url: string; + show: boolean; +} +@Component({ + selector: 'ngx-viewport', + templateUrl: './viewport.component.html', + styleUrls: ['./viewport.component.scss'], +}) +export class ViewportComponent implements OnInit { + // prettier-ignore + // tslint:disable:max-line-length + imageItemCollection: ImageItem[] = [ + { + id: 1, + url: 'https://images.unsplash.com/photo-1512672378591-74fbb56b1d28?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=111881731843c98860fd6ede341337d7&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + { + id: 2, + url: 'https://images.unsplash.com/photo-1486495939893-f384c2860f55?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bf36a4694839666ab094bcdd0bb88651&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + { + id: 3, + url: 'https://images.unsplash.com/photo-1514913274516-4aa04f176f8c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6940b0c53d64fc564bed31bb6aa8d9b&auto=format&fit=crop&w=1760&q=80', + show: false, + }, + { + id: 4, + url: 'https://images.unsplash.com/photo-1523286877159-d9636545890c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f44497f72d77b9e8e27e87521e025edc&auto=format&fit=crop&w=1351&q=80', + show: false, + }, + { + id: 5, + url: 'https://images.unsplash.com/photo-1459886757952-87e191b82aeb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6c977d9f0c074c220a31f1e89449c3aa&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + { + id: 6, + url: 'https://images.unsplash.com/photo-1519423961530-9131478718db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6132d79c5060ba00caa99cf39457da6&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + { + id: 7, + url: 'https://images.unsplash.com/photo-1482510356941-d087154c2931?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cd6c067c548407960ec92f1e820775ee&auto=format&fit=crop&w=1355&q=80', + show: false, + }, + { + id: 8, + url: 'https://images.unsplash.com/photo-1520507215037-061ed0f37178?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0b0ee4f4dcd684859da448cc26c707a2&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + { + id: 9, + url: 'https://images.unsplash.com/photo-1522447984233-657d56c465d8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b2efa4e73b38094995897590487ba5b4&auto=format&fit=crop&w=1350&q=80', + show: false, + }, + ]; + + constructor() {} + + ngOnInit() {} + + get totalImagesShown(): number { + return (this.imageItemCollection.filter(imageItem => imageItem.show) || []).length; + } + + show(event: Partial, image: ImageItem) { + if (event.intersectionRatio >= 0.5) { + image.show = true; + console.log( + `in-view ==> image: ${image.id}, intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${ + event.isIntersecting + }`, + ); + } else { + console.log( + `out-of-view <== image: ${image.id}, intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${ + event.isIntersecting + }`, + ); + } + } + + anim(event: Partial, element: string) { + console.log( + `anim: ${element} intersectionRatio: ${event.intersectionRatio}, isIntersecting: ${event.isIntersecting}`, + ); + if (event.intersectionRatio >= 0.5) { + event.target.classList.add('fancy'); + } else { + event.target.classList.remove('fancy'); + } + } +} diff --git a/libs/experiments/src/lib/experiments.module.ts b/libs/experiments/src/lib/experiments.module.ts index c9e70cbf4..ad6712491 100644 --- a/libs/experiments/src/lib/experiments.module.ts +++ b/libs/experiments/src/lib/experiments.module.ts @@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router'; import { FilePondModule, registerPlugin } from 'ngx-filepond'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { KnobModule } from '@xmlking/ngx-knob'; +import { InViewportModule } from '@ngx-starter-kit/ngx-utils'; import { ClapModule } from '@ngx-starter-kit/clap'; import { LedModule } from '@ngx-starter-kit/led'; @@ -19,13 +20,14 @@ import { VirtualScrollComponent } from './containers/virtual-scroll/virtual-scro import { StickyTableComponent } from './containers/sticky-table/sticky-table.component'; import { LedDemoComponent } from './containers/led-demo/led-demo.component'; import { ImageCompComponent } from './containers/image-comp/image-comp.component'; +import { LayoutComponent } from './containers/layout/layout.component'; +import { CardComponent } from './components/card/card.component'; +import { ViewportComponent } from './containers/viewport/viewport.component'; // Registering plugins import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; import * as FilepondPluginFileValidateSize from 'filepond-plugin-file-validate-size'; import * as FilepondPluginImagePreview from 'filepond-plugin-image-preview'; -import { LayoutComponent } from './containers/layout/layout.component'; -import { CardComponent } from './components/card/card.component'; registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, FilepondPluginImagePreview); @@ -38,6 +40,7 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F ClapModule, LedModule, KnobModule, + InViewportModule, ImageComparisonModule, RouterModule.forChild([ /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */ @@ -92,6 +95,11 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F component: LayoutComponent, data: { title: 'Layout', depth: 3 }, }, + { + path: 'viewport', + component: ViewportComponent, + data: { title: 'Viewport', depth: 3 }, + }, ]), ], declarations: [ @@ -107,6 +115,7 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F ImageCompComponent, LayoutComponent, CardComponent, + ViewportComponent, ], }) export class ExperimentsModule {} diff --git a/libs/ngx-utils/README.md b/libs/ngx-utils/README.md index 0e2bfcfd1..23dd2eba1 100644 --- a/libs/ngx-utils/README.md +++ b/libs/ngx-utils/README.md @@ -3,3 +3,60 @@ same as [@ngrx-utils/store](https://github.com/ngrx-utils/ngrx-utils) without dependency on `@ngrx/store` **Pipes:** filter, group-by, safeHtml + +**Directive:** inViewport, ngLet, routerLinkMatch + +### InViewport Directive + +> Add `IntersectionObserver` [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to [polyfills.ts](../../apps/webapp/src/polyfills.ts) for `Safari` Support + +```html +
+
Hello World!
 +
+``` + +> If `entry.intersectionRatio >= 0.5` ==> `Inside Viewport` +>
+> If `entry.intersectionRatio < 0.5` ==> `Outside Viewport` + +#### Flags +1. Trigger only One Time : `[oneTime]="true"` usecase: image loading. +2. Server-Side Rendering : By default, loads the elements on the server. +> If you do not want to pre-render the elements in server, you can set `preRender to false. i.e., `[preRender]="false"` + +### Viewport Service + +> You can use `ViewportService` itself in any Component + +```typescript +import { ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { untilDestroy, ViewportService } from '@ngx-starter-kit/ngx-utils'; + +export class ViewportDemoComponent implements OnInit, OnDestroy { + public constructor(private element: ElementRef, private viewportService: ViewportService) {} + + public ngOnInit(): void { + this.viewportService + .observe(this.element.nativeElement) + .pipe(untilDestroy(this)) + .subscribe((entry: IntersectionObserverEntry) => { + if (entry.isIntersecting) { + this.show(); + } else { + this.hide(); + } + }); + } + + ngOnDestroy() {} + + private show(): void { + // => Animation + } + + private hide(): void { + // <= Animation + } +} +``` diff --git a/libs/ngx-utils/jest.config.js b/libs/ngx-utils/jest.config.js index a44acdb0f..4fbee8c4e 100644 --- a/libs/ngx-utils/jest.config.js +++ b/libs/ngx-utils/jest.config.js @@ -1,5 +1,6 @@ module.exports = { name: 'ngx-utils', preset: '../../jest.config.js', + transformIgnorePatterns: ['node_modules/(?!date-fns)'], coverageDirectory: '../../coverage/libs/ngx-utils', }; diff --git a/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.spec.ts b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.spec.ts new file mode 100644 index 000000000..1c5ae7b17 --- /dev/null +++ b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.spec.ts @@ -0,0 +1,18 @@ +import { InViewportDirective } from './in-viewport.directive'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ViewportService } from './viewport.service'; +import { InViewportModule } from './in-viewport.module'; + +describe('InViewportDirective', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + // providers: [ViewportService], + imports: [InViewportModule], + }).compileComponents(); + }); + + xit('should create an instance', () => { + const fixture = TestBed.createComponent(InViewportDirective); + expect(fixture).toBeTruthy(); + }); +}); diff --git a/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.ts b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.ts new file mode 100644 index 000000000..901444df1 --- /dev/null +++ b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.directive.ts @@ -0,0 +1,60 @@ +import { + Directive, + ElementRef, + EventEmitter, + Inject, + Input, + OnDestroy, + OnInit, + Output, + PLATFORM_ID, +} from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; +import { untilDestroy } from '../../operators/untilDestroy'; +import { ViewportService } from './viewport.service'; +import { filter, take } from 'rxjs/operators'; + +@Directive({ + selector: '[inViewport]', +}) +export class InViewportDirective implements OnInit, OnDestroy { + @Input() public preRender = true; + @Input() public oneTime = false; + @Output() readonly inViewport = new EventEmitter>(); + + constructor( + private readonly elementRef: ElementRef, + private viewportService: ViewportService, + @Inject(PLATFORM_ID) private platformId: Object, + ) {} + + public ngOnInit() { + if (isPlatformBrowser(this.platformId)) { + if (this.oneTime) { + this.viewportService + .observe(this.elementRef.nativeElement) + .pipe( + untilDestroy(this), + filter(entry => entry.intersectionRatio >= 0.5), + take(1), + ) + .subscribe((entry: IntersectionObserverEntry) => { + this.inViewport.emit(entry); + }); + } else { + this.viewportService + .observe(this.elementRef.nativeElement) + .pipe(untilDestroy(this)) + .subscribe((entry: IntersectionObserverEntry) => { + this.inViewport.emit(entry); + }); + } + } else { + if (this.preRender) { + this.inViewport.emit({ isIntersecting: true, intersectionRatio: 1 }); + } + } + } + + ngOnDestroy() {} +} diff --git a/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.module.ts b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.module.ts new file mode 100644 index 000000000..566b25a1d --- /dev/null +++ b/libs/ngx-utils/src/lib/directives/in-viewport/in-viewport.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { InViewportDirective } from './in-viewport.directive'; + +@NgModule({ + imports: [CommonModule], + declarations: [InViewportDirective], + exports: [InViewportDirective], +}) +export class InViewportModule {} diff --git a/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.spec.ts b/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.spec.ts new file mode 100644 index 000000000..d1d69caa3 --- /dev/null +++ b/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { ViewportService } from './viewport.service'; + +describe('ViewportService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: ViewportService = TestBed.get(ViewportService); + expect(service).toBeTruthy(); + }); +}); diff --git a/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.ts b/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.ts new file mode 100644 index 000000000..10715d27f --- /dev/null +++ b/libs/ngx-utils/src/lib/directives/in-viewport/viewport.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { finalize, filter } from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root', +}) +export class ViewportService { + private readonly options: IntersectionObserverInit = { + rootMargin: '0px 0px 0px 0px', + threshold: [0.5], + }; + private observer: IntersectionObserver; + private callback$: Subject = new Subject(); + + constructor() { + this.observer = new IntersectionObserver(this.handler.bind(this), this.options); + } + + observe(element: Element): Observable { + this.observer.observe(element); + + return this.callback$.asObservable().pipe( + filter((entry: IntersectionObserverEntry) => entry.target === element), + finalize(() => this.observer.unobserve(element)), + ); + } + + private handler(entries: Array): void { + entries.forEach(entry => this.callback$.next(entry)); + } +} diff --git a/libs/ngx-utils/src/lib/directives/index.ts b/libs/ngx-utils/src/lib/directives/index.ts index e293d169d..6b4d29ab9 100644 --- a/libs/ngx-utils/src/lib/directives/index.ts +++ b/libs/ngx-utils/src/lib/directives/index.ts @@ -1,2 +1,4 @@ export * from './ng-let/ng-let.module'; export * from './router-link-match/router-link-match.module'; +export * from './in-viewport/in-viewport.module'; +export * from './in-viewport/viewport.service'; diff --git a/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts b/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts index 186d24634..ce802bc25 100644 --- a/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts +++ b/libs/ngx-utils/src/lib/pipes/date-fns/format-time-in-words.pipe.ts @@ -4,9 +4,7 @@ import { interval, Observable, of } from 'rxjs'; import { delayWhen, map, repeatWhen, takeWhile, tap } from 'rxjs/operators'; import { Options } from 'date-fns'; -// FIXME: esm modules not working with Jest Tests import { differenceInMinutes, formatDistance } from 'date-fns/esm'; -// import { formatDistance, differenceInMinutes } from 'date-fns'; const defaultConfig: Options = { addSuffix: true }; /** diff --git a/libs/ngx-utils/src/test-setup.ts b/libs/ngx-utils/src/test-setup.ts index 8d88704e8..1ba5d628e 100644 --- a/libs/ngx-utils/src/test-setup.ts +++ b/libs/ngx-utils/src/test-setup.ts @@ -1 +1,31 @@ import 'jest-preset-angular'; + +class FakeIntersectionObserver { + readonly callback: IntersectionObserverCallback; + constructor( callback: IntersectionObserverCallback, options?: IntersectionObserverInit ) { + this.callback = callback; + } + observe( target: Element ): void { + const ary = []; + const obj: IntersectionObserverEntry = { + boundingClientRect: undefined, + intersectionRect: undefined, + rootBounds: undefined, + time: 60, + intersectionRatio: 1, + target: target, + isIntersecting: true + }; + ary[ 0 ] = obj; + const callback = () => {}; + const observer = new IntersectionObserver( callback ); + this.callback( ary, observer ); + } + unobserve( target: Element ): void {} + disconnect(): void {} +} + +Object.defineProperty(window, 'IntersectionObserver', { + value: FakeIntersectionObserver, + writable: true, +}); diff --git a/libs/ngx-utils/tsconfig.spec.json b/libs/ngx-utils/tsconfig.spec.json index 710554419..807dd46a2 100644 --- a/libs/ngx-utils/tsconfig.spec.json +++ b/libs/ngx-utils/tsconfig.spec.json @@ -3,6 +3,7 @@ "compilerOptions": { "outDir": "../../dist/out-tsc/libs/ngx-utils", "module": "commonjs", + "allowJs": true, "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], diff --git a/libs/notifications/src/lib/notifications.module.ts b/libs/notifications/src/lib/notifications.module.ts index aef3c07d2..f90914dab 100644 --- a/libs/notifications/src/lib/notifications.module.ts +++ b/libs/notifications/src/lib/notifications.module.ts @@ -4,9 +4,10 @@ import { NgxsModule } from '@ngxs/store'; import { SharedModule } from '@ngx-starter-kit/shared'; import { NotificationsState } from './notifications.state'; +import { DateFnsModule } from '@ngx-starter-kit/ngx-utils'; @NgModule({ - imports: [SharedModule, NgxsModule.forFeature([NotificationsState])], + imports: [SharedModule, DateFnsModule, NgxsModule.forFeature([NotificationsState])], declarations: [NotificationsComponent], exports: [NotificationsComponent], }) diff --git a/libs/shared/src/lib/shared.module.ts b/libs/shared/src/lib/shared.module.ts index 6ecb7a64b..841c9139b 100644 --- a/libs/shared/src/lib/shared.module.ts +++ b/libs/shared/src/lib/shared.module.ts @@ -14,7 +14,7 @@ import { PERFECT_SCROLLBAR_CONFIG, } from 'ngx-perfect-scrollbar'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; -import { DateFnsModule, NgLetModule, RouterLinkMatchModule } from '@ngx-starter-kit/ngx-utils'; +import { NgLetModule, RouterLinkMatchModule } from '@ngx-starter-kit/ngx-utils'; const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { suppressScrollX: true, @@ -34,7 +34,6 @@ const DIRECTIVES = [MinValidatorDirective, ClickOutsideDirective]; MaterialModule, MaterialDateModule, NgLetModule, - DateFnsModule, RouterLinkMatchModule, FontAwesomeModule, FormlyMaterialModule, diff --git a/package-lock.json b/package-lock.json index 0ade134e3..3c85618f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1679,6 +1679,95 @@ "tslib": "^1.9.0" } }, + "@ngxs/schematics": { + "version": "0.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/@ngxs/schematics/-/schematics-0.0.1-alpha.0.tgz", + "integrity": "sha512-aHGSWCVwmaXTCdd/kxNkY2LIckx2BkT1ZLcG23a3/ih98yhMN3bt3gxoCHJBUJKPpmDRYcNq7IDb7zCsXVNQWQ==", + "dev": true, + "requires": { + "@angular-devkit/core": "^0.8.5", + "@angular-devkit/schematics": "^0.8.5", + "typescript": "^2.9.2" + }, + "dependencies": { + "@angular-devkit/core": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.8.tgz", + "integrity": "sha512-FDt+ZrKT/pAR74YnbZJQ5Nza+1b5PxGjgvbUtyX63VNxgETTjPa7Oe9Hc6jqW0CekTxHzAFJn79VPRUwKQIocg==", + "dev": true, + "requires": { + "ajv": "6.4.0", + "chokidar": "2.0.4", + "rxjs": "6.2.2", + "source-map": "0.5.7" + } + }, + "@angular-devkit/schematics": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.8.8.tgz", + "integrity": "sha512-MXdjdG9KENur1Pu9etAfO5rbO0T5bk5tFWlCxdPr34a/EDy1rkz5taReTSV1Fc5ERWx3Brubws0EB2NrgPkRcw==", + "dev": true, + "requires": { + "@angular-devkit/core": "0.8.8", + "rxjs": "6.2.2" + } + }, + "ajv": { + "version": "6.4.0", + "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", + "dev": true, + "requires": { + "fast-deep-equal": "^1.0.0", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.3.0", + "uri-js": "^3.0.2" + } + }, + "fast-deep-equal": { + "version": "1.1.0", + "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", + "dev": true + }, + "json-schema-traverse": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", + "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", + "dev": true + }, + "rxjs": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz", + "integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "typescript": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", + "dev": true + }, + "uri-js": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-3.0.2.tgz", + "integrity": "sha1-+QuFhQf4HepNz7s8TD2/orVX+qo=", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + } + } + }, "@ngxs/storage-plugin": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@ngxs/storage-plugin/-/storage-plugin-3.3.1.tgz", @@ -12023,6 +12112,11 @@ "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=", "dev": true }, + "intersection-observer": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.1.tgz", + "integrity": "sha512-Zd7Plneq82kiXFixs7bX62YnuZ0BMRci9br7io88LwDyF3V43cQMI+G5IiTlTNTt+LsDUppl19J/M2Fp9UkH6g==" + }, "into-stream": { "version": "3.1.0", "resolved": "http://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz", @@ -15925,9 +16019,9 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" }, "ng-packagr": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.4.0.tgz", - "integrity": "sha512-dLpC/kmQsdbkL96ZclGjNRhq/J4MwpPKwPYNom74lvXqFC2jbbT/fnwmxX9WKXjvE8MEGsg2D2x8MsRURiNscg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.4.5.tgz", + "integrity": "sha512-O2s2j6c54HguKLX183zQtey/hcVY7+XVJ5ynpB/LEaiGmkhxFXAku7K/7lLdCO5GkE8YaYw55M/Cmt8O+AqPsQ==", "dev": true, "requires": { "@ngtools/json-schema": "^1.1.0", @@ -15944,11 +16038,12 @@ "less-plugin-npm-import": "^2.1.0", "node-sass": "^4.9.3", "node-sass-tilde-importer": "^1.0.0", + "opencollective": "^1.0.3", "postcss": "^7.0.0", "postcss-url": "^8.0.0", "read-pkg-up": "^4.0.0", "rimraf": "^2.6.1", - "rollup": "^0.66.0", + "rollup": "^0.67.0", "rollup-plugin-commonjs": "^9.1.3", "rollup-plugin-json": "^3.1.0", "rollup-plugin-node-resolve": "^3.0.0", @@ -15959,6 +16054,46 @@ "update-notifier": "^2.3.0" }, "dependencies": { + "ansi-escapes": { + "version": "1.4.0", + "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz", + "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "babel-polyfill": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz", + "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "core-js": "^2.4.0", + "regenerator-runtime": "^0.10.0" + } + }, + "chardet": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz", + "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", + "dev": true + }, + "external-editor": { + "version": "2.2.0", + "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", + "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==", + "dev": true, + "requires": { + "chardet": "^0.4.0", + "iconv-lite": "^0.4.17", + "tmp": "^0.0.33" + } + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -15968,6 +16103,42 @@ "locate-path": "^3.0.0" } }, + "inquirer": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz", + "integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=", + "dev": true, + "requires": { + "ansi-escapes": "^1.1.0", + "chalk": "^1.0.0", + "cli-cursor": "^2.1.0", + "cli-width": "^2.0.0", + "external-editor": "^2.0.1", + "figures": "^2.0.0", + "lodash": "^4.3.0", + "mute-stream": "0.0.7", + "run-async": "^2.2.0", + "rx": "^4.1.0", + "string-width": "^2.0.0", + "strip-ansi": "^3.0.0", + "through": "^2.3.6" + }, + "dependencies": { + "chalk": { + "version": "1.1.3", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + } + } + }, "load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", @@ -15990,6 +16161,67 @@ "path-exists": "^3.0.0" } }, + "minimist": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "node-fetch": { + "version": "1.6.3", + "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz", + "integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=", + "dev": true, + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, + "opencollective": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz", + "integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=", + "dev": true, + "requires": { + "babel-polyfill": "6.23.0", + "chalk": "1.1.3", + "inquirer": "3.0.6", + "minimist": "1.2.0", + "node-fetch": "1.6.3", + "opn": "4.0.2" + }, + "dependencies": { + "chalk": { + "version": "1.1.3", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + } + } + }, + "opn": { + "version": "4.0.2", + "resolved": "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz", + "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=", + "dev": true, + "requires": { + "object-assign": "^4.0.1", + "pinkie-promise": "^2.0.0" + } + }, "p-limit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz", @@ -16045,6 +16277,12 @@ "read-pkg": "^3.0.0" } }, + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -16057,6 +16295,12 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", @@ -21905,9 +22149,9 @@ } }, "rollup": { - "version": "0.66.6", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz", - "integrity": "sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==", + "version": "0.67.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.67.3.tgz", + "integrity": "sha512-TyNQCz97rKuVVbsKUTXfwIjV7UljWyTVd7cTMuE+aqlQ7WJslkYF5QaYGjMLR2BlQtUOO5CAxSVnpQ55iYp5jg==", "dev": true, "requires": { "@types/estree": "0.0.39", diff --git a/package.json b/package.json index a211ae48a..3544d3422 100644 --- a/package.json +++ b/package.json @@ -168,6 +168,7 @@ "formidable": "^1.2.1", "hammerjs": "^2.0.8", "helmet": "^3.15.0", + "intersection-observer": "^0.5.1", "nest-router": "^1.0.8", "ngx-filepond": "^4.1.0", "ngx-page-scroll": "^5.0.0", @@ -198,6 +199,7 @@ "@compodoc/compodoc": "^1.1.7", "@nestjs/testing": "^5.4.0", "@ngx-formly/schematics": "5.0.0-beta.5", + "@ngxs/schematics": "0.0.1-alpha.0", "@nrwl/builders": "^7.1.1", "@nrwl/schematics": "^7.1.1", "@semantic-release/changelog": "^3.0.1", diff --git a/stories/howto.md b/stories/howto.md index ec036329b..be290fe92 100644 --- a/stories/howto.md +++ b/stories/howto.md @@ -11,6 +11,18 @@ Right click on `docs` in project view --> Make Directory as --> Excluded. Right click on `dist` in project view --> Make Directory as --> Excluded. Right click on `coverage` in project view --> Make Directory as --> Excluded. +#### How to configure `Jest` to test code that is importing `esm modules`? +1. Add `transformIgnorePatterns` to `jest.config.js` +```js +module.exports = { + name: 'ngx-utils', + preset: '../../jest.config.js', + transformIgnorePatterns: ['node_modules/(?!date-fns)'], + coverageDirectory: '../../coverage/libs/ngx-utils', +}; +``` +2. Add `"allowJs": true` to `compilerOptions` in `tsconfig.spec.json` + #### How to release/deploy? using travis CI/CD