From ff316800852ba386d09c8e279901d252a3b7ef4e Mon Sep 17 00:00:00 2001 From: Lorent Lempereur Date: Sat, 27 May 2023 17:25:45 +0200 Subject: [PATCH 1/4] Upgrade to Angular 16 and support Ivy --- .eslintrc.js | 190 ++++++++++++++++++ .gitignore | 3 +- .nvmrc | 1 + README.md | 7 +- demo-ng11 | 1 - demo-ng16/.editorconfig | 13 ++ demo-ng16/.gitignore | 39 ++++ demo-ng16/README.md | 27 +++ demo-ng16/angular.json | 115 +++++++++++ demo-ng16/e2e/protractor.conf.js | 28 +++ demo-ng16/e2e/src/app.e2e-spec.ts | 14 ++ demo-ng16/e2e/src/app.po.ts | 11 + demo-ng16/e2e/tsconfig.e2e.json | 13 ++ demo-ng16/package.json | 49 +++++ .../alert-select/alert-select.component.ts | 46 +++++ .../src/app/alert-select/options.service.ts | 44 ++++ demo-ng16/src/app/alert/alert.component.ts | 31 +++ demo-ng16/src/app/app.component.css | 0 demo-ng16/src/app/app.component.html | 107 ++++++++++ demo-ng16/src/app/app.component.ts | 102 ++++++++++ demo-ng16/src/app/app.module.ts | 51 +++++ .../src/app/confirm/confirm.component.ts | 42 ++++ .../app/custom-error/custom-error-handler.ts | 29 +++ .../parent-dialog/parent-dialog.component.ts | 41 ++++ demo-ng16/src/app/prompt/prompt.component.ts | 43 ++++ demo-ng16/src/assets/.gitkeep | 0 demo-ng16/src/browserslist | 9 + .../src/environments/environment.prod.ts | 3 + demo-ng16/src/environments/environment.ts | 15 ++ demo-ng16/src/favicon.ico | Bin 0 -> 5430 bytes demo-ng16/src/index.html | 18 ++ demo-ng16/src/karma.conf.js | 31 +++ demo-ng16/src/main.ts | 12 ++ demo-ng16/src/polyfills.ts | 80 ++++++++ demo-ng16/src/styles.css | 1 + demo-ng16/src/test.ts | 20 ++ demo-ng16/src/tsconfig.app.json | 11 + demo-ng16/src/tsconfig.spec.json | 16 ++ demo-ng16/src/tslint.json | 17 ++ demo-ng16/tsconfig.json | 20 ++ demo-ng5/src/test.ts | 18 +- demo-ng6/src/test.ts | 6 +- demo-ng8/src/test.ts | 6 +- ng-package.json | 2 +- package.json | 56 +++--- .../simple-modal-holder.component.ts | 4 +- src/simple-modal/simple-modal-options.ts | 2 +- .../simple-modal-wrapper.component.ts | 12 +- src/simple-modal/simple-modal.component.ts | 5 +- src/simple-modal/simple-modal.module.ts | 3 +- src/tests/jest-global-mocks.ts | 40 ++++ src/tests/jest.ts | 2 +- .../simple-modal-holder.component.spec.ts | 3 +- .../simple-modal-wrapper.component.spec.ts | 3 +- src/tests/simple-modal.service.spec.ts | 9 +- src/tsconfig.build.json | 5 +- tsconfig.json | 64 +++--- src/tsconfig.spec.json => tsconfig.spec.json | 10 +- 58 files changed, 1436 insertions(+), 114 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .nvmrc delete mode 160000 demo-ng11 create mode 100644 demo-ng16/.editorconfig create mode 100644 demo-ng16/.gitignore create mode 100644 demo-ng16/README.md create mode 100644 demo-ng16/angular.json create mode 100644 demo-ng16/e2e/protractor.conf.js create mode 100644 demo-ng16/e2e/src/app.e2e-spec.ts create mode 100644 demo-ng16/e2e/src/app.po.ts create mode 100644 demo-ng16/e2e/tsconfig.e2e.json create mode 100644 demo-ng16/package.json create mode 100644 demo-ng16/src/app/alert-select/alert-select.component.ts create mode 100644 demo-ng16/src/app/alert-select/options.service.ts create mode 100644 demo-ng16/src/app/alert/alert.component.ts create mode 100644 demo-ng16/src/app/app.component.css create mode 100644 demo-ng16/src/app/app.component.html create mode 100644 demo-ng16/src/app/app.component.ts create mode 100644 demo-ng16/src/app/app.module.ts create mode 100644 demo-ng16/src/app/confirm/confirm.component.ts create mode 100644 demo-ng16/src/app/custom-error/custom-error-handler.ts create mode 100644 demo-ng16/src/app/parent-dialog/parent-dialog.component.ts create mode 100644 demo-ng16/src/app/prompt/prompt.component.ts create mode 100644 demo-ng16/src/assets/.gitkeep create mode 100644 demo-ng16/src/browserslist create mode 100644 demo-ng16/src/environments/environment.prod.ts create mode 100644 demo-ng16/src/environments/environment.ts create mode 100644 demo-ng16/src/favicon.ico create mode 100644 demo-ng16/src/index.html create mode 100644 demo-ng16/src/karma.conf.js create mode 100644 demo-ng16/src/main.ts create mode 100644 demo-ng16/src/polyfills.ts create mode 100644 demo-ng16/src/styles.css create mode 100644 demo-ng16/src/test.ts create mode 100644 demo-ng16/src/tsconfig.app.json create mode 100644 demo-ng16/src/tsconfig.spec.json create mode 100644 demo-ng16/src/tslint.json create mode 100644 demo-ng16/tsconfig.json rename src/tsconfig.spec.json => tsconfig.spec.json (61%) diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..414183ea --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,190 @@ +module.exports = { + "env": { + "browser": true, + "node": true + }, + "extends": [ + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": "tsconfig.json", + "sourceType": "module" + }, + "plugins": [ + "@angular-eslint/eslint-plugin", + "@typescript-eslint" + ], + "root": true, + "rules": { + "@angular-eslint/component-class-suffix": [ + "error", + { + "suffixes": [ + "Component", + "Container" + ] + } + ], + "@angular-eslint/component-selector": [ + "off", + { + "type": "element", + "prefix": "app", + "style": "kebab-case" + } + ], + "@angular-eslint/directive-class-suffix": "error", + "@angular-eslint/directive-selector": [ + "off", + { + "type": "attribute", + "prefix": "app", + "style": "camelCase" + } + ], + "@angular-eslint/no-input-rename": "off", + "@angular-eslint/no-output-rename": "error", + "@angular-eslint/use-pipe-transform-interface": "error", + "@typescript-eslint/consistent-type-definitions": "error", + "@typescript-eslint/dot-notation": "off", + "@typescript-eslint/explicit-member-accessibility": [ + "off", + { + "accessibility": "explicit" + } + ], + "@typescript-eslint/member-delimiter-style": [ + "error", + { + "multiline": { + "delimiter": "semi", + "requireLast": true + }, + "singleline": { + "delimiter": "semi", + "requireLast": false + } + } + ], + "@typescript-eslint/naming-convention": [ + "error", + { + "selector": "variable", + "format": [ + "camelCase", + "UPPER_CASE" + ], + "leadingUnderscore": "allow", + "trailingUnderscore": "forbid" + } + ], + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-empty-interface": "error", + "@typescript-eslint/no-inferrable-types": [ + "error", + { + "ignoreParameters": true + } + ], + "@typescript-eslint/no-misused-new": "error", + "@typescript-eslint/no-non-null-assertion": "error", + "@typescript-eslint/no-shadow": [ + "error", + { + "hoist": "all" + } + ], + "@typescript-eslint/no-unused-expressions": "error", + "@typescript-eslint/prefer-function-type": "error", + "@typescript-eslint/quotes": [ + "error", + "single" + ], + "@typescript-eslint/semi": [ + "error", + "always" + ], + "@typescript-eslint/type-annotation-spacing": "error", + "@typescript-eslint/unified-signatures": "error", + "arrow-body-style": "error", + "brace-style": [ + "error", + "1tbs" + ], + "constructor-super": "error", + "curly": "error", + "dot-notation": "off", + "eol-last": "error", + "eqeqeq": [ + "error", + "smart" + ], + "guard-for-in": "error", + "id-denylist": "off", + "id-match": "off", + "max-len": [ + "error", + { + "code": 160 + } + ], + "no-bitwise": "error", + "no-caller": "error", + "no-console": [ + "error", + { + "allow": [ + "log", + "warn", + "dir", + "timeLog", + "assert", + "clear", + "count", + "countReset", + "group", + "groupEnd", + "table", + "dirxml", + "error", + "groupCollapsed", + "Console", + "profile", + "profileEnd", + "timeStamp", + "context" + ] + } + ], + "no-debugger": "error", + "no-empty": "off", + "no-empty-function": "off", + "no-eval": "error", + "no-fallthrough": "error", + "no-new-wrappers": "error", + "no-restricted-imports": "error", + "no-shadow": "off", + "no-throw-literal": "error", + "no-trailing-spaces": "error", + "no-undef-init": "error", + "no-underscore-dangle": "off", + "no-unused-expressions": "off", + "no-unused-labels": "error", + "no-var": "error", + "prefer-const": "error", + "quotes": "off", + "radix": "error", + "semi": "off", + "spaced-comment": [ + "error", + "always", + { + "markers": [ + "/" + ] + } + ], + "valid-typeof": "error" + } +}; diff --git a/.gitignore b/.gitignore index 5bfc5475..73f7ee8a 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,5 @@ package-lock.json .npmrc /.vs -.DS_Store \ No newline at end of file +.DS_Store +.angular diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..0e9dc6b5 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v18.13.0 diff --git a/README.md b/README.md index daaecc10..701ea9a8 100644 --- a/README.md +++ b/README.md @@ -204,8 +204,7 @@ export class ConfirmComponent extends SimpleModalComponent { + let page: AppPage; + + beforeEach(() => { + page = new AppPage(); + }); + + it('should display welcome message', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('ngx-simple-modal demo ng16'); + }); +}); diff --git a/demo-ng16/e2e/src/app.po.ts b/demo-ng16/e2e/src/app.po.ts new file mode 100644 index 00000000..82ea75ba --- /dev/null +++ b/demo-ng16/e2e/src/app.po.ts @@ -0,0 +1,11 @@ +import { browser, by, element } from 'protractor'; + +export class AppPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('app-root h1')).getText(); + } +} diff --git a/demo-ng16/e2e/tsconfig.e2e.json b/demo-ng16/e2e/tsconfig.e2e.json new file mode 100644 index 00000000..a6dd6220 --- /dev/null +++ b/demo-ng16/e2e/tsconfig.e2e.json @@ -0,0 +1,13 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "jasminewd2", + "node" + ] + } +} \ No newline at end of file diff --git a/demo-ng16/package.json b/demo-ng16/package.json new file mode 100644 index 00000000..2c9a0292 --- /dev/null +++ b/demo-ng16/package.json @@ -0,0 +1,49 @@ +{ + "name": "demo-ng16", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e", + "freshcopy": "rm -rf node_modules/ngx-simple-modal && cp -rf ../dist node_modules/ngx-simple-modal", + "postinstall": "cd .. && npm i && npm run build && cd demo-ng16 && rm -rf node_modules/ngx-simple-modal && cp -rf ../dist node_modules/ngx-simple-modal", + "rebuild": "npm i && ng serve" + }, + "private": true, + "dependencies": { + "@angular/animations": "16.0.2", + "@angular/cdk": "16.0.2", + "@angular/common": "16.0.2", + "@angular/compiler": "16.0.2", + "@angular/core": "16.0.2", + "@angular/forms": "16.0.2", + "@angular/platform-browser": "16.0.2", + "@angular/platform-browser-dynamic": "16.0.2", + "@angular/router": "16.0.2", + "core-js": "3.30.2", + "rxjs": "7.8.1", + "zone.js": "0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "16.0.2", + "@angular/cli": "16.0.2", + "@angular/compiler-cli": "16.0.2", + "@angular/language-service": "16.0.2", + "@types/jasmine": "4.3.2", + "@types/jasminewd2": "2.0.10", + "@types/node": "20.2.4", + "jasmine-core": "4.0.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "6.4.2", + "karma-chrome-launcher": "3.2.0", + "karma-coverage-istanbul-reporter": "3.0.3", + "karma-jasmine": "4.0.2", + "karma-jasmine-html-reporter": "1.7.0", + "protractor": "7.0.0", + "tslib": "^2.5.2", + "typescript": "5.0.4" + } +} diff --git a/demo-ng16/src/app/alert-select/alert-select.component.ts b/demo-ng16/src/app/alert-select/alert-select.component.ts new file mode 100644 index 00000000..74642afc --- /dev/null +++ b/demo-ng16/src/app/alert-select/alert-select.component.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; +import { IOption, OptionService } from './options.service'; + + +export interface AlertSelectModel { + title: string; + message: string; +} + +@Component({ + selector: 'alert-select', + template: ` +
+
+

{{title || 'Alert!'}}

+
+
+

this ng-select didn't close on selection

+

+ Selected option: {{selectedCharacter}} + + +

+
+
+ +
+
+ ` +}) +export class AlertSelectComponent extends SimpleModalComponent implements AlertSelectModel { + title: string; + message: string; + + characters: Array = this.optionService.getCharacters(); + selectedCharacter = '3'; + + constructor(private readonly optionService: OptionService) { + super(); + } +} diff --git a/demo-ng16/src/app/alert-select/options.service.ts b/demo-ng16/src/app/alert-select/options.service.ts new file mode 100644 index 00000000..13c63839 --- /dev/null +++ b/demo-ng16/src/app/alert-select/options.service.ts @@ -0,0 +1,44 @@ + +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +export interface IOption { + value: string; + label: string; +} + +@Injectable() +export class OptionService { + + private static readonly PLAYER_ONE: Array = [ + { value: '0', label: 'Aech' }, + { value: '1', label: 'Art3mis' }, + { value: '2', label: 'Daito' }, + { value: '3', label: 'Parzival' }, + { value: '4', label: 'Shoto' } + ]; + + getCharacters(): Array { + return this.cloneOptions(OptionService.PLAYER_ONE); + } + + loadCharacters(): Observable> { + return this.loadOptions(OptionService.PLAYER_ONE); + } + + private loadOptions(options: Array): Observable> { + return new Observable((obs) => { + setTimeout(() => { + obs.next(this.cloneOptions(options)); + obs.complete(); + }, 5000); + }); + } + + private cloneOptions(options: Array): Array { + return options.map(option => ({ + value: option.value, + label: option.label + })); + } +} diff --git a/demo-ng16/src/app/alert/alert.component.ts b/demo-ng16/src/app/alert/alert.component.ts new file mode 100644 index 00000000..7c6c8596 --- /dev/null +++ b/demo-ng16/src/app/alert/alert.component.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface AlertModel { + title?: string; + message?: string; +} + +@Component({ + selector: 'alert', + template: ` +
+
+

{{title || 'Alert!'}}

+
+
+

{{message || 'TADAA-AM!'}}

+
+
+ +
+
+ ` +}) +export class AlertComponent extends SimpleModalComponent implements AlertModel { + title: string; + message: string; + constructor() { + super(); + } +} diff --git a/demo-ng16/src/app/app.component.css b/demo-ng16/src/app/app.component.css new file mode 100644 index 00000000..e69de29b diff --git a/demo-ng16/src/app/app.component.html b/demo-ng16/src/app/app.component.html new file mode 100644 index 00000000..d0f3682c --- /dev/null +++ b/demo-ng16/src/app/app.component.html @@ -0,0 +1,107 @@ +
+

ngx-simple-modal demo ng16

+
+
+
+
+ Alert example: +
+
+ +
+
+
+
+
+
+ Alert with ng-select example: +
+
+ +
+
+
+
+
+
+ Alert with ng-select example and close when clicking background: +
+
+ +
+
+ Result: + {{selectResult}} +
+
+
+
+
+
+ Confirm example: +
+
+ +
+
+ Result: + {{confirmResult ? 'Accepted': 'Declined'}} +
+
+
+
+
+
+ Prompt example that can be moved: +
+
+ +
+
+ Your name: + {{promptMessage}} +
+
+
+
+
+
+ Close modal by click outside example: +
+
+ +
+
+
+
+
+
+ ESC key closable example: +
+
+ +
+
+
+
+
+
+ Show dialogue in error handler / catch function: +
+
+ +
+
+
+
+
+
+ Show modal from modal: +
+
+ +
+
+
+
diff --git a/demo-ng16/src/app/app.component.ts b/demo-ng16/src/app/app.component.ts new file mode 100644 index 00000000..e2e1b16d --- /dev/null +++ b/demo-ng16/src/app/app.component.ts @@ -0,0 +1,102 @@ +import { Component } from '@angular/core'; +import { SimpleModalService } from 'ngx-simple-modal'; +import { AlertComponent } from './alert/alert.component'; +import { ConfirmComponent } from './confirm/confirm.component'; +import { PromptComponent } from './prompt/prompt.component'; +import { ParentDialogModalComponent } from './parent-dialog/parent-dialog.component'; +import { AlertSelectComponent } from './alert-select/alert-select.component'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + confirmResult = null; + promptMessage = ''; + selectResult = null; + + constructor(private simpleModalService: SimpleModalService) {} + + showAlert() { + this.simpleModalService.addModal(AlertComponent, { + title: 'Alert title!', + message: 'Alert message!!!', + }); + } + + showAlertWithSelect() { + this.simpleModalService + .addModal( + AlertSelectComponent, + { + title: 'Alert title!', + message: 'Alert message!!!', + }, + { + autoFocus: true, + } + ) + .subscribe(selected => { + this.selectResult = selected; + }); + } + + showAlertWithSelectPlusBClick() { + this.simpleModalService.addModal( + AlertSelectComponent, + { title: 'Alert title!', message: 'Alert message!!!' }, + { closeOnClickOutside: true } + ); + } + + showConfirm() { + this.simpleModalService + .addModal(ConfirmComponent, { + title: 'Confirmation', + message: 'Bla bla confirm some action?', + }) + .subscribe(isConfirmed => { + // Get modal result + this.confirmResult = isConfirmed; + }); + } + + showPrompt() { + this.simpleModalService + .addModal(PromptComponent, { + title: 'Name dialog', + question: 'What is your name?: ', + }, { + draggable: true + }) + .subscribe(message => { + // We get modal result + this.promptMessage = message; + }); + } + + showAlertWithClickOutside() { + this.simpleModalService.addModal( + AlertComponent, + { message: 'Click outside to close dialog' }, + { closeOnClickOutside: true } + ); + } + + showAlertWithCloseByEscapeKey() { + this.simpleModalService.addModal( + AlertComponent, + { message: 'Dialog with close using escape' }, + { closeOnEscape: true } + ); + } + + showAlertThatThrowsError() { + throw new Error('Shown via custom error handler'); + } + + showParentDialog() { + this.simpleModalService.addModal(ParentDialogModalComponent); + } +} diff --git a/demo-ng16/src/app/app.module.ts b/demo-ng16/src/app/app.module.ts new file mode 100644 index 00000000..2f0147c4 --- /dev/null +++ b/demo-ng16/src/app/app.module.ts @@ -0,0 +1,51 @@ +import { A11yModule } from '@angular/cdk/a11y'; +import { ErrorHandler, NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { defaultSimpleModalOptions, SimpleModalModule } from 'ngx-simple-modal'; +import { AlertSelectComponent } from './alert-select/alert-select.component'; +import { OptionService } from './alert-select/options.service'; +import { AlertComponent } from './alert/alert.component'; +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm/confirm.component'; +import { CustomErrorHandler } from './custom-error/custom-error-handler'; +import { ParentDialogModalComponent } from './parent-dialog/parent-dialog.component'; +import { PromptComponent } from './prompt/prompt.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + A11yModule, + SimpleModalModule.forRoot( + { container: 'modal-container' }, + { + ...defaultSimpleModalOptions, + ...{ + closeOnEscape: true, + closeOnClickOutside: true, + animationDuration: 0, + autoFocus: true, + draggable: true + }, + } + ), + ], + declarations: [ + AppComponent, + AlertComponent, + AlertSelectComponent, + ConfirmComponent, + PromptComponent, + ParentDialogModalComponent, + ], + providers: [ + { + provide: ErrorHandler, + useClass: CustomErrorHandler, + }, + OptionService, + ], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/demo-ng16/src/app/confirm/confirm.component.ts b/demo-ng16/src/app/confirm/confirm.component.ts new file mode 100644 index 00000000..4ee23ffc --- /dev/null +++ b/demo-ng16/src/app/confirm/confirm.component.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface ConfirmModel { + title: string; + message: string; +} + +@Component({ + selector: 'confirm', + template: ` +
+
+

{{title || 'Confirm'}}

+
+
+

{{message || 'Are you sure?'}}

+
+
+ + +
+
+ ` +}) +export class ConfirmComponent extends SimpleModalComponent implements ConfirmModel { + title: string; + message: string; + constructor() { + super(); + } + confirm() { + // on click on confirm button we set dialog result as true, + // ten we can get dialog result from caller code + this.result = true; + this.close(); + } + cancel() { + this.result = false; + this.close(); + } +} diff --git a/demo-ng16/src/app/custom-error/custom-error-handler.ts b/demo-ng16/src/app/custom-error/custom-error-handler.ts new file mode 100644 index 00000000..437ff91b --- /dev/null +++ b/demo-ng16/src/app/custom-error/custom-error-handler.ts @@ -0,0 +1,29 @@ +import { ErrorHandler, Injectable, Injector, isDevMode, ApplicationRef } from '@angular/core'; +import { SimpleModalService } from 'ngx-simple-modal'; + +import { AlertComponent } from '../alert/alert.component'; + + +@Injectable() +export class CustomErrorHandler implements ErrorHandler { + + constructor(private injector: Injector) { } + + handleError(error) { + const modalService = this.injector.get(SimpleModalService); + const appRef = this.injector.get(ApplicationRef); + const message = error.message ? error.message : error.toString(); + + if (isDevMode()) { + console.error('Custom error : ' + error); + } + + modalService.addModal(AlertComponent, { + title: 'An error occurred', + message: message, + }); + + // ng5 error handler does not trigger change detection so we have to do this + setTimeout(() => appRef.tick(), 0); + } +} diff --git a/demo-ng16/src/app/parent-dialog/parent-dialog.component.ts b/demo-ng16/src/app/parent-dialog/parent-dialog.component.ts new file mode 100644 index 00000000..039c0dcc --- /dev/null +++ b/demo-ng16/src/app/parent-dialog/parent-dialog.component.ts @@ -0,0 +1,41 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent, SimpleModalService } from 'ngx-simple-modal'; + +import { ConfirmComponent } from '../confirm/confirm.component'; + + +@Component({ + selector: 'parent-modal', + template: ` +
+
+

Parent dialog

+
+
+

bla-bla

+

bla-bla

+

bla-bla

+
+
+ +
+
+ ` +}) +export class ParentDialogModalComponent extends SimpleModalComponent { + + constructor(private simpleModalService: SimpleModalService) { + super(); + } + + confirm() { + this.simpleModalService.addModal(ConfirmComponent, { + title: 'Confirm', + message: 'Are you sure you want close dialog?' + }).subscribe((isConfirmed) => { + if (isConfirmed) { + this.close(); + } + }); + } +} diff --git a/demo-ng16/src/app/prompt/prompt.component.ts b/demo-ng16/src/app/prompt/prompt.component.ts new file mode 100644 index 00000000..ecf4b952 --- /dev/null +++ b/demo-ng16/src/app/prompt/prompt.component.ts @@ -0,0 +1,43 @@ +import { Component, ViewChild, ElementRef } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface PromptModel { + title: string; + question: string; +} + +@Component({ + selector: 'prompt', + template: ` +
+
+

{{ title || 'Prompt' }}

+
+
+ + +
+
+ + +
+
+ `, +}) +export class PromptComponent extends SimpleModalComponent + implements PromptModel { + @ViewChild('handle', { static: true }) handle: ElementRef; + + title: string; + question: string; + message = ''; + + constructor() { + super(); + } + + apply() { + this.result = this.message; + this.close(); + } +} diff --git a/demo-ng16/src/assets/.gitkeep b/demo-ng16/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/demo-ng16/src/browserslist b/demo-ng16/src/browserslist new file mode 100644 index 00000000..8e09ab49 --- /dev/null +++ b/demo-ng16/src/browserslist @@ -0,0 +1,9 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# For IE 9-11 support, please uncomment the last line of the file and adjust as needed +> 0.5% +last 2 versions +Firefox ESR +not dead +# IE 9-11 \ No newline at end of file diff --git a/demo-ng16/src/environments/environment.prod.ts b/demo-ng16/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/demo-ng16/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/demo-ng16/src/environments/environment.ts b/demo-ng16/src/environments/environment.ts new file mode 100644 index 00000000..012182ef --- /dev/null +++ b/demo-ng16/src/environments/environment.ts @@ -0,0 +1,15 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * In development mode, to ignore zone related error stack frames such as + * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can + * import the following file, but please comment it out in production mode + * because it will have performance impact when throw error + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/demo-ng16/src/favicon.ico b/demo-ng16/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- + + + + Simple Modal Demo + + + + + + + + + + + Loading... + + diff --git a/demo-ng16/src/karma.conf.js b/demo-ng16/src/karma.conf.js new file mode 100644 index 00000000..b6e00421 --- /dev/null +++ b/demo-ng16/src/karma.conf.js @@ -0,0 +1,31 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../coverage'), + reports: ['html', 'lcovonly'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; \ No newline at end of file diff --git a/demo-ng16/src/main.ts b/demo-ng16/src/main.ts new file mode 100644 index 00000000..91ec6da5 --- /dev/null +++ b/demo-ng16/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/demo-ng16/src/polyfills.ts b/demo-ng16/src/polyfills.ts new file mode 100644 index 00000000..cc346dcc --- /dev/null +++ b/demo-ng16/src/polyfills.ts @@ -0,0 +1,80 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +//import 'core-js/es7/reflect'; + + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/demo-ng16/src/styles.css b/demo-ng16/src/styles.css new file mode 100644 index 00000000..90d4ee00 --- /dev/null +++ b/demo-ng16/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/demo-ng16/src/test.ts b/demo-ng16/src/test.ts new file mode 100644 index 00000000..475c1038 --- /dev/null +++ b/demo-ng16/src/test.ts @@ -0,0 +1,20 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const global: any; + +// First, initialize the Angular testing environment. +getTestBed().resetTestEnvironment(); +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = global.requireContext('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/demo-ng16/src/tsconfig.app.json b/demo-ng16/src/tsconfig.app.json new file mode 100644 index 00000000..8d35dfac --- /dev/null +++ b/demo-ng16/src/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "es2015", + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/demo-ng16/src/tsconfig.spec.json b/demo-ng16/src/tsconfig.spec.json new file mode 100644 index 00000000..fbe7e320 --- /dev/null +++ b/demo-ng16/src/tsconfig.spec.json @@ -0,0 +1,16 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "module": "commonjs", + "types": [ + "jasmine", + "node" + ] + }, + "files": [], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/demo-ng16/src/tslint.json b/demo-ng16/src/tslint.json new file mode 100644 index 00000000..52e2c1a5 --- /dev/null +++ b/demo-ng16/src/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ] + } +} diff --git a/demo-ng16/tsconfig.json b/demo-ng16/tsconfig.json new file mode 100644 index 00000000..aa600300 --- /dev/null +++ b/demo-ng16/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "typeRoots": [ + "node_modules/@types" + ], + "target": "es2015", + "lib": [ + "es2019", + "dom" + ] + } +} diff --git a/demo-ng5/src/test.ts b/demo-ng5/src/test.ts index 9bf72267..475c1038 100644 --- a/demo-ng5/src/test.ts +++ b/demo-ng5/src/test.ts @@ -1,32 +1,20 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/long-stack-trace-zone'; -import 'zone.js/dist/proxy.js'; -import 'zone.js/dist/sync-test'; -import 'zone.js/dist/jasmine-patch'; -import 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare var __karma__: any; -declare var require: any; - -// Prevent Karma from running prematurely. -__karma__.loaded = function () {}; +declare const global: any; // First, initialize the Angular testing environment. +getTestBed().resetTestEnvironment(); getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = global.requireContext('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); -// Finally, start Karma to run the tests. -__karma__.start(); diff --git a/demo-ng6/src/test.ts b/demo-ng6/src/test.ts index 16317897..475c1038 100644 --- a/demo-ng6/src/test.ts +++ b/demo-ng6/src/test.ts @@ -1,20 +1,20 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; +declare const global: any; // First, initialize the Angular testing environment. +getTestBed().resetTestEnvironment(); getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = global.requireContext('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); diff --git a/demo-ng8/src/test.ts b/demo-ng8/src/test.ts index 16317897..475c1038 100644 --- a/demo-ng8/src/test.ts +++ b/demo-ng8/src/test.ts @@ -1,20 +1,20 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; +declare const global: any; // First, initialize the Angular testing environment. +getTestBed().resetTestEnvironment(); getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = global.requireContext('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); diff --git a/ng-package.json b/ng-package.json index fac71294..827d8bea 100644 --- a/ng-package.json +++ b/ng-package.json @@ -3,4 +3,4 @@ "lib": { "entryFile": "src/index.ts" } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 67876224..7530bba9 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "ngx-simple-modal", - "version": "1.4.15", + "version": "16.0.0", "description": "A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.", "scripts": { "demo-ng5": "cd demo-ng5 && npm i && ng serve", "demo-ng6": "cd demo-ng6 && npm i && ng serve", "demo-ng8": "cd demo-ng8 && npm i && ng serve", - "lint": "./node_modules/.bin/tslint src/**/*.ts", + "demo-ng16": "cd demo-ng16 && npm i && ng serve", + "lint": "eslint -c .eslintrc.js --ext .ts src/simple-modal/**/*.ts", "prepublish": "npm run build", "build": "npm run lint && ng-packagr --config src/tsconfig.build.json", "postbuild": "npm run prepare-package", @@ -47,30 +48,37 @@ }, "homepage": "https://github.com/kevcjones/ngx-simple-modal#readme", "devDependencies": { - "@angular/animations": "8.0.3", - "@angular/cli": "^8.0.6", - "@angular/common": "8.0.3", - "@angular/compiler": "8.0.3", - "@angular/compiler-cli": "8.0.3", - "@angular/core": "8.0.3", - "@angular/platform-browser": "8.0.3", - "@angular/platform-browser-dynamic": "8.0.3", - "@angular/platform-server": "8.0.3", - "@types/jest": "^19.2.4", - "@types/node": "^6.0.102", - "codelyzer": "^4.0.1", - "fs-extra": "^5.0.0", - "jest": "^20.0.3", - "jest-preset-angular": "^2.0.2", - "ng-packagr": "^5.7.1", - "rxjs": "^6.0.0", - "tslib": "^1.10.0", - "tslint": "^5.8.0", - "typescript": "~3.4.5", - "zone.js": "^0.9.1" + "@angular-eslint/eslint-plugin": "16.0.2", + "@angular-eslint/eslint-plugin-template": "16.0.2", + "@angular/animations": "16.0.3", + "@angular/cli": "16.0.3", + "@angular/common": "16.0.3", + "@angular/compiler": "16.0.3", + "@angular/compiler-cli": "16.0.3", + "@angular/core": "16.0.3", + "@angular/platform-browser": "16.0.3", + "@angular/platform-browser-dynamic": "16.0.3", + "@angular/platform-server": "16.0.3", + "@types/jest": "29.5.1", + "@types/node": "20.2.5", + "@typescript-eslint/eslint-plugin": "5.59.7", + "@typescript-eslint/parser": "5.59.7", + "eslint": "8.41.0", + "eslint-config-prettier": "8.8.0", + "fs-extra": "11.1.1", + "jest": "29.5.0", + "jest-preset-angular": "13.1.1", + "ts-jest": "29.1.0", + "ng-packagr": "16.0.1", + "rxjs": "7.8.1", + "tslib": "2.5.2", + "typescript": "5.0.4", + "zone.js": "0.13.0" }, "jest": { "preset": "jest-preset-angular", - "setupTestFrameworkScriptFile": "/src/tests/jest.ts" + "setupFilesAfterEnv": [ + "/src/tests/jest.ts" + ] } } diff --git a/src/simple-modal/simple-modal-holder.component.ts b/src/simple-modal/simple-modal-holder.component.ts index dcf7af1b..ad9667f8 100644 --- a/src/simple-modal/simple-modal-holder.component.ts +++ b/src/simple-modal/simple-modal-holder.component.ts @@ -215,8 +215,8 @@ export class SimpleModalHolderComponent { * @param ms */ private wait(ms: number = 0): Promise { - return new Promise((resolve, reject) => { - setTimeout(() => resolve(), ms); + return new Promise((resolve, reject) => { + setTimeout(() => resolve(undefined), ms); }); } diff --git a/src/simple-modal/simple-modal-options.ts b/src/simple-modal/simple-modal-options.ts index 8c21e699..c2f12925 100644 --- a/src/simple-modal/simple-modal-options.ts +++ b/src/simple-modal/simple-modal-options.ts @@ -1,6 +1,6 @@ import { InjectionToken } from '@angular/core'; -export const DefaultSimpleModalOptionConfig = new InjectionToken('default-simple-modal.config'); +export const DefaultSimpleModalOptionConfig = new InjectionToken('default-simple-modal.config'); // eslint-disable-line export interface SimpleModalOptions { closeOnEscape: boolean; diff --git a/src/simple-modal/simple-modal-wrapper.component.ts b/src/simple-modal/simple-modal-wrapper.component.ts index 2eb1ea45..a33e90d3 100644 --- a/src/simple-modal/simple-modal-wrapper.component.ts +++ b/src/simple-modal/simple-modal-wrapper.component.ts @@ -1,12 +1,13 @@ import { Component, ComponentFactoryResolver, + ComponentRef, ElementRef, + Injector, OnDestroy, - ReflectiveInjector, Type, ViewChild, - ViewContainerRef, ComponentRef, + ViewContainerRef } from '@angular/core'; import { SimpleModalComponent } from './simple-modal.component'; @@ -60,9 +61,12 @@ export class SimpleModalWrapperComponent implements OnDestroy { * @param {Type} component * @return {SimpleModalComponent} */ - addComponent(component: Type>): {ref: ComponentRef>, component: SimpleModalComponent} { + addComponent(component: Type>): {ref: ComponentRef>; component: SimpleModalComponent} { const factory = this.resolver.resolveComponentFactory(component); - const injector = ReflectiveInjector.fromResolvedProviders([], this.viewContainer.injector); + const injector = Injector.create({ + providers: [], + parent: this.viewContainer.injector + }); const componentRef = factory.create(injector); this.viewContainer.insert(componentRef.hostView); this.content = >componentRef.instance; diff --git a/src/simple-modal/simple-modal.component.ts b/src/simple-modal/simple-modal.component.ts index c2416551..a37712cb 100644 --- a/src/simple-modal/simple-modal.component.ts +++ b/src/simple-modal/simple-modal.component.ts @@ -1,5 +1,5 @@ -import { ElementRef, HostListener, OnDestroy } from '@angular/core'; -import { Observable, Observer, Subject, BehaviorSubject } from 'rxjs'; +import { Component, ElementRef, HostListener } from '@angular/core'; +import { BehaviorSubject, Observable, Observer } from 'rxjs'; import { SimpleModalOptions } from './simple-modal-options'; @@ -8,6 +8,7 @@ export interface OnDestroyLike { [key: string]: any; } +@Component({ template: '' }) /** * Abstract modal * @template T - modal data; diff --git a/src/simple-modal/simple-modal.module.ts b/src/simple-modal/simple-modal.module.ts index c19a9480..0314600e 100644 --- a/src/simple-modal/simple-modal.module.ts +++ b/src/simple-modal/simple-modal.module.ts @@ -27,8 +27,7 @@ import { DraggableDirective } from './simple-modal-draggable.directive'; useValue: defaultSimpleModalOptions, }, ], - imports: [CommonModule], - entryComponents: [SimpleModalHolderComponent, SimpleModalWrapperComponent], + imports: [CommonModule] }) export class SimpleModalModule { static forRoot( diff --git a/src/tests/jest-global-mocks.ts b/src/tests/jest-global-mocks.ts index ca006a26..9777e6f3 100644 --- a/src/tests/jest-global-mocks.ts +++ b/src/tests/jest-global-mocks.ts @@ -14,3 +14,43 @@ Object.defineProperty(window, 'getComputedStyle', { value: () => ['-webkit-appearance'] }); + +const fs = require('fs'); +const path = require('path'); + +global.requireContext = (base = '.', scanSubDirectories = false, regularExpression = /\.js$/) => { + // @ts-ignore + if (typeof require.context !== 'undefined') { + // @ts-ignore + return require.context(base, scanSubDirectories, regularExpression); + } + + const files = {}; + + function readDirectory(directory) { + fs.readdirSync(directory).forEach((file) => { + const fullPath = path.resolve(directory, file); + + if (fs.statSync(fullPath).isDirectory()) { + if (scanSubDirectories) readDirectory(fullPath); + + return; + } + + if (!regularExpression.test(fullPath)) return; + + files[fullPath] = true; + }); + } + + readDirectory(path.resolve(__dirname, base)); + + function Module(file) { + return require(file); + } + + // @ts-ignore + Module.keys = () => Object.keys(files); + + return Module; +}; diff --git a/src/tests/jest.ts b/src/tests/jest.ts index 904329f5..9a3535cf 100644 --- a/src/tests/jest.ts +++ b/src/tests/jest.ts @@ -1,2 +1,2 @@ -import 'jest-preset-angular'; +import 'jest-preset-angular/setup-jest'; import './jest-global-mocks'; diff --git a/src/tests/simple-modal-holder.component.spec.ts b/src/tests/simple-modal-holder.component.spec.ts index 6f1c3ab2..8a5ae4ee 100644 --- a/src/tests/simple-modal-holder.component.spec.ts +++ b/src/tests/simple-modal-holder.component.spec.ts @@ -17,8 +17,7 @@ const config: SimpleModalServiceConfig = { @NgModule({ imports: [CommonModule], - declarations: [AlertComponent, SimpleModalWrapperComponent], - entryComponents: [AlertComponent, SimpleModalWrapperComponent] + declarations: [AlertComponent, SimpleModalWrapperComponent] }) export class FakeTestAlertModule {} diff --git a/src/tests/simple-modal-wrapper.component.spec.ts b/src/tests/simple-modal-wrapper.component.spec.ts index 194d85f1..8edea531 100644 --- a/src/tests/simple-modal-wrapper.component.spec.ts +++ b/src/tests/simple-modal-wrapper.component.spec.ts @@ -16,8 +16,7 @@ const config: SimpleModalServiceConfig = { @NgModule({ imports: [CommonModule], - declarations: [AlertComponent, SimpleModalWrapperComponent], - entryComponents: [AlertComponent, SimpleModalWrapperComponent] + declarations: [AlertComponent, SimpleModalWrapperComponent] }) export class FakeTestAlertModule {} diff --git a/src/tests/simple-modal.service.spec.ts b/src/tests/simple-modal.service.spec.ts index d708a7d1..eaf1f018 100644 --- a/src/tests/simple-modal.service.spec.ts +++ b/src/tests/simple-modal.service.spec.ts @@ -1,16 +1,13 @@ 'use strict'; -import { ComponentFixture, TestBed, inject } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core'; +import { ApplicationRef, ComponentFactoryResolver, Injector } from '@angular/core'; +import { TestBed, inject } from '@angular/core/testing'; -import { Component } from '@angular/core'; +import { DefaultSimpleModalOptionConfig, defaultSimpleModalOptions } from '../simple-modal/simple-modal-options'; import { SimpleModalServiceFactory } from '../simple-modal/simple-modal-service.factory'; import { SimpleModalService, SimpleModalServiceConfig } from '../simple-modal/simple-modal.service'; import { AlertComponent } from './mocks/basic-alert'; import { SimpleModalHolderComponentMock } from './mocks/simple-modal-holder.compoenent.mock'; -import { SimpleModalHolderComponent } from '../simple-modal/simple-modal-holder.component'; -import { DefaultSimpleModalOptionConfig, defaultSimpleModalOptions } from '../simple-modal/simple-modal-options'; const config: SimpleModalServiceConfig = { diff --git a/src/tsconfig.build.json b/src/tsconfig.build.json index a2d2b88e..d96a4c71 100644 --- a/src/tsconfig.build.json +++ b/src/tsconfig.build.json @@ -2,7 +2,6 @@ "compilerOptions": { "baseUrl": ".", "target": "es2015", - "module": "es2015", "moduleResolution": "node", "outDir": "../build", "stripInternal": true, @@ -15,8 +14,8 @@ "importHelpers": true, "types": [], "lib": [ - "dom", - "es2015" + "es2019", + "dom" ] }, "files": [ diff --git a/tsconfig.json b/tsconfig.json index 943fee84..414e5b44 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,34 +1,34 @@ { -"compilerOptions": { - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "removeComments": true, - "sourceMap": true, - "outDir": "dist", - "declarationDir": "dist", - "declaration": true, - "lib": [ - "dom", - "es6" - ] -}, -"compileOnSave": true, -"include": [ -"src/**/*" -], -"exclude": [ -"demo-ng5", -"demo_ng6", -"index.d.ts", -"node_modules", -"dist" -], -"angularCompilerOptions": { -"genDir": "dist/", -"strictMetadataEmit": true, -"skipTemplateCodegen": true -} + "compileOnSave": true, + "compilerOptions": { + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "removeComments": true, + "sourceMap": true, + "outDir": "dist", + "declarationDir": "dist", + "declaration": true, + "target": "es2015", + "lib": [ + "es2019", + "dom" + ] + }, + "include": [ + "src/**/*" +, "tsconfig.spec.json" ], + "exclude": [ + "demo-ng5", + "demo_ng6", + "demo_ng16", + "index.d.ts", + "node_modules", + "dist" + ], + "angularCompilerOptions": { + "genDir": "dist/", + "strictMetadataEmit": true, + "skipTemplateCodegen": true + } } diff --git a/src/tsconfig.spec.json b/tsconfig.spec.json similarity index 61% rename from src/tsconfig.spec.json rename to tsconfig.spec.json index e3130c8a..c88ee38c 100644 --- a/src/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -1,15 +1,19 @@ { - "extends": "./tsconfig.build.json", + "extends": "./src/tsconfig.build.json", "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, + "esModuleInterop": true, "outDir": "../out-tsc/spec", - "module": "commonjs", - "target": "es6", "baseUrl": "", + "module": "commonjs", "types": [ "jest", "node" + ], + "typeRoots": [ + "./types", + "./node_modules/@types" ] } } From 6579d59f1390ec195f1baf80a0cb5bb4f95c1649 Mon Sep 17 00:00:00 2001 From: Lorent Lempereur Date: Sat, 27 May 2023 17:44:42 +0200 Subject: [PATCH 2/4] Upgrade to Angular 16 and support Ivy --- demo-ng16/src/app/alert-select/alert-select.component.ts | 6 +++--- demo-ng16/src/app/app.component.html | 4 ++-- demo-ng16/src/app/app.module.ts | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/demo-ng16/src/app/alert-select/alert-select.component.ts b/demo-ng16/src/app/alert-select/alert-select.component.ts index 74642afc..e6f2c69e 100644 --- a/demo-ng16/src/app/alert-select/alert-select.component.ts +++ b/demo-ng16/src/app/alert-select/alert-select.component.ts @@ -16,15 +16,15 @@ export interface AlertSelectModel {

{{title || 'Alert!'}}

-

this ng-select didn't close on selection

+

this select didn't close on selection

Selected option: {{selectedCharacter}} + Select Art3mis +

diff --git a/demo-ng16/src/app/app.component.html b/demo-ng16/src/app/app.component.html index d0f3682c..8c9c367c 100644 --- a/demo-ng16/src/app/app.component.html +++ b/demo-ng16/src/app/app.component.html @@ -14,7 +14,7 @@

ngx-simple-modal demo ng16


- Alert with ng-select example: + Alert with select example:
@@ -24,7 +24,7 @@

ngx-simple-modal demo ng16


- Alert with ng-select example and close when clicking background: + Alert with select example and close when clicking background:
diff --git a/demo-ng16/src/app/app.module.ts b/demo-ng16/src/app/app.module.ts index 2f0147c4..46aa4261 100644 --- a/demo-ng16/src/app/app.module.ts +++ b/demo-ng16/src/app/app.module.ts @@ -22,11 +22,11 @@ import { PromptComponent } from './prompt/prompt.component'; { ...defaultSimpleModalOptions, ...{ - closeOnEscape: true, - closeOnClickOutside: true, + closeOnEscape: false, + closeOnClickOutside: false, animationDuration: 0, autoFocus: true, - draggable: true + draggable: false }, } ), From 14c50c7ed8617a602a1c2dd99eb879d7ec4b51f4 Mon Sep 17 00:00:00 2001 From: Lorent Lempereur Date: Sat, 27 May 2023 18:03:27 +0200 Subject: [PATCH 3/4] Upgrade to Angular 16 and support Ivy --- package.json | 2 +- src/tsconfig.build.json | 3 ++- tsconfig.json | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 7530bba9..3dc7b69b 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "test": "jest", "test:watch": "jest --watch", "test:ci": "jest --runInBand", - "release": "npm run build && cd dist && release-it" + "release": "npm run build && cd dist && npm publish --access=public" }, "repository": { "type": "git", diff --git a/src/tsconfig.build.json b/src/tsconfig.build.json index d96a4c71..83b222ce 100644 --- a/src/tsconfig.build.json +++ b/src/tsconfig.build.json @@ -25,6 +25,7 @@ "skipTemplateCodegen": true, "strictMetadataEmit": true, "fullTemplateTypeCheck": true, - "enableResourceInlining": true + "enableResourceInlining": true, + "compilationMode": "partial" } } diff --git a/tsconfig.json b/tsconfig.json index 414e5b44..087a148a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,6 +29,7 @@ "angularCompilerOptions": { "genDir": "dist/", "strictMetadataEmit": true, - "skipTemplateCodegen": true + "skipTemplateCodegen": true, + "compilationMode": "partial" } } From d35dca5c50f4b466af2344bfcb1cf0595b48531b Mon Sep 17 00:00:00 2001 From: taishin_gn Date: Wed, 10 Jan 2024 17:18:17 +0900 Subject: [PATCH 4/4] Migrate to angular 17 --- demo-ng17/.editorconfig | 13 ++ demo-ng17/.gitignore | 39 ++++++ demo-ng17/README.md | 27 ++++ demo-ng17/angular.json | 115 ++++++++++++++++++ demo-ng17/e2e/protractor.conf.js | 28 +++++ demo-ng17/e2e/src/app.e2e-spec.ts | 14 +++ demo-ng17/e2e/src/app.po.ts | 11 ++ demo-ng17/e2e/tsconfig.e2e.json | 13 ++ demo-ng17/package.json | 49 ++++++++ .../alert-select/alert-select.component.ts | 46 +++++++ .../src/app/alert-select/options.service.ts | 44 +++++++ demo-ng17/src/app/alert/alert.component.ts | 31 +++++ demo-ng17/src/app/app.component.css | 0 demo-ng17/src/app/app.component.html | 107 ++++++++++++++++ demo-ng17/src/app/app.component.ts | 102 ++++++++++++++++ demo-ng17/src/app/app.module.ts | 51 ++++++++ .../src/app/confirm/confirm.component.ts | 42 +++++++ .../app/custom-error/custom-error-handler.ts | 29 +++++ .../parent-dialog/parent-dialog.component.ts | 41 +++++++ demo-ng17/src/app/prompt/prompt.component.ts | 43 +++++++ demo-ng17/src/assets/.gitkeep | 0 demo-ng17/src/browserslist | 9 ++ .../src/environments/environment.prod.ts | 3 + demo-ng17/src/environments/environment.ts | 15 +++ demo-ng17/src/favicon.ico | Bin 0 -> 5430 bytes demo-ng17/src/index.html | 18 +++ demo-ng17/src/karma.conf.js | 31 +++++ demo-ng17/src/main.ts | 12 ++ demo-ng17/src/polyfills.ts | 76 ++++++++++++ demo-ng17/src/styles.css | 1 + demo-ng17/src/test.ts | 20 +++ demo-ng17/src/tsconfig.app.json | 11 ++ demo-ng17/src/tsconfig.spec.json | 16 +++ demo-ng17/src/tslint.json | 17 +++ demo-ng17/tsconfig.json | 20 +++ package.json | 33 ++--- 36 files changed, 1111 insertions(+), 16 deletions(-) create mode 100644 demo-ng17/.editorconfig create mode 100644 demo-ng17/.gitignore create mode 100644 demo-ng17/README.md create mode 100644 demo-ng17/angular.json create mode 100644 demo-ng17/e2e/protractor.conf.js create mode 100644 demo-ng17/e2e/src/app.e2e-spec.ts create mode 100644 demo-ng17/e2e/src/app.po.ts create mode 100644 demo-ng17/e2e/tsconfig.e2e.json create mode 100644 demo-ng17/package.json create mode 100644 demo-ng17/src/app/alert-select/alert-select.component.ts create mode 100644 demo-ng17/src/app/alert-select/options.service.ts create mode 100644 demo-ng17/src/app/alert/alert.component.ts create mode 100644 demo-ng17/src/app/app.component.css create mode 100644 demo-ng17/src/app/app.component.html create mode 100644 demo-ng17/src/app/app.component.ts create mode 100644 demo-ng17/src/app/app.module.ts create mode 100644 demo-ng17/src/app/confirm/confirm.component.ts create mode 100644 demo-ng17/src/app/custom-error/custom-error-handler.ts create mode 100644 demo-ng17/src/app/parent-dialog/parent-dialog.component.ts create mode 100644 demo-ng17/src/app/prompt/prompt.component.ts create mode 100644 demo-ng17/src/assets/.gitkeep create mode 100644 demo-ng17/src/browserslist create mode 100644 demo-ng17/src/environments/environment.prod.ts create mode 100644 demo-ng17/src/environments/environment.ts create mode 100644 demo-ng17/src/favicon.ico create mode 100644 demo-ng17/src/index.html create mode 100644 demo-ng17/src/karma.conf.js create mode 100644 demo-ng17/src/main.ts create mode 100644 demo-ng17/src/polyfills.ts create mode 100644 demo-ng17/src/styles.css create mode 100644 demo-ng17/src/test.ts create mode 100644 demo-ng17/src/tsconfig.app.json create mode 100644 demo-ng17/src/tsconfig.spec.json create mode 100644 demo-ng17/src/tslint.json create mode 100644 demo-ng17/tsconfig.json diff --git a/demo-ng17/.editorconfig b/demo-ng17/.editorconfig new file mode 100644 index 00000000..6e87a003 --- /dev/null +++ b/demo-ng17/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/demo-ng17/.gitignore b/demo-ng17/.gitignore new file mode 100644 index 00000000..ee5c9d83 --- /dev/null +++ b/demo-ng17/.gitignore @@ -0,0 +1,39 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings + +# System Files +.DS_Store +Thumbs.db diff --git a/demo-ng17/README.md b/demo-ng17/README.md new file mode 100644 index 00000000..16bca8f4 --- /dev/null +++ b/demo-ng17/README.md @@ -0,0 +1,27 @@ +# DemoNg6 + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/demo-ng17/angular.json b/demo-ng17/angular.json new file mode 100644 index 00000000..eb69262b --- /dev/null +++ b/demo-ng17/angular.json @@ -0,0 +1,115 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo-ng17": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo-ng17", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css", + "./node_modules/ngx-simple-modal/styles/simple-modal.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "buildTarget": "demo-ng17:build" + }, + "configurations": { + "production": { + "buildTarget": "demo-ng17:build:production" + }, + "development": { + "buildTarget": "demo-ng17:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo-ng17:build" + } + } + } + }, + "demo-ng17-e2e": { + "root": "e2e/", + "projectType": "application", + "architect": { + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "demo-ng17:serve" + }, + "configurations": { + "production": { + "devServerTarget": "demo-ng17:serve:production" + } + } + } + } + } + }, + "cli": { + "analytics": false + } +} diff --git a/demo-ng17/e2e/protractor.conf.js b/demo-ng17/e2e/protractor.conf.js new file mode 100644 index 00000000..86776a39 --- /dev/null +++ b/demo-ng17/e2e/protractor.conf.js @@ -0,0 +1,28 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter } = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './src/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + onPrepare() { + require('ts-node').register({ + project: require('path').join(__dirname, './tsconfig.e2e.json') + }); + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + } +}; \ No newline at end of file diff --git a/demo-ng17/e2e/src/app.e2e-spec.ts b/demo-ng17/e2e/src/app.e2e-spec.ts new file mode 100644 index 00000000..3e6c452f --- /dev/null +++ b/demo-ng17/e2e/src/app.e2e-spec.ts @@ -0,0 +1,14 @@ +import { AppPage } from './app.po'; + +describe('workspace-project App', () => { + let page: AppPage; + + beforeEach(() => { + page = new AppPage(); + }); + + it('should display welcome message', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('ngx-simple-modal demo ng17'); + }); +}); diff --git a/demo-ng17/e2e/src/app.po.ts b/demo-ng17/e2e/src/app.po.ts new file mode 100644 index 00000000..82ea75ba --- /dev/null +++ b/demo-ng17/e2e/src/app.po.ts @@ -0,0 +1,11 @@ +import { browser, by, element } from 'protractor'; + +export class AppPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('app-root h1')).getText(); + } +} diff --git a/demo-ng17/e2e/tsconfig.e2e.json b/demo-ng17/e2e/tsconfig.e2e.json new file mode 100644 index 00000000..a6dd6220 --- /dev/null +++ b/demo-ng17/e2e/tsconfig.e2e.json @@ -0,0 +1,13 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "jasminewd2", + "node" + ] + } +} \ No newline at end of file diff --git a/demo-ng17/package.json b/demo-ng17/package.json new file mode 100644 index 00000000..44e5d2da --- /dev/null +++ b/demo-ng17/package.json @@ -0,0 +1,49 @@ +{ + "name": "demo-ng17", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e", + "freshcopy": "rm -rf node_modules/ngx-simple-modal && cp -rf ../dist node_modules/ngx-simple-modal", + "postinstall": "cd .. && npm i && npm run build && cd demo-ng17 && rm -rf node_modules/ngx-simple-modal && cp -rf ../dist node_modules/ngx-simple-modal", + "rebuild": "npm i && ng serve" + }, + "private": true, + "dependencies": { + "@angular/animations": "17.0.8", + "@angular/cdk": "16.0.2", + "@angular/common": "17.0.8", + "@angular/compiler": "17.0.8", + "@angular/core": "17.0.8", + "@angular/forms": "17.0.8", + "@angular/platform-browser": "17.0.8", + "@angular/platform-browser-dynamic": "17.0.8", + "@angular/router": "17.0.8", + "core-js": "3.30.2", + "rxjs": "7.8.1", + "zone.js": "0.14.2" + }, + "devDependencies": { + "@angular-devkit/build-angular": "17.0.9", + "@angular/cli": "17.0.9", + "@angular/compiler-cli": "17.0.8", + "@angular/language-service": "17.0.8", + "@types/jasmine": "4.3.2", + "@types/jasminewd2": "2.0.10", + "@types/node": "20.2.4", + "jasmine-core": "4.0.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "6.4.2", + "karma-chrome-launcher": "3.2.0", + "karma-coverage-istanbul-reporter": "3.0.3", + "karma-jasmine": "4.0.2", + "karma-jasmine-html-reporter": "1.7.0", + "protractor": "7.0.0", + "tslib": "^2.5.2", + "typescript": "5.2.2" + } +} \ No newline at end of file diff --git a/demo-ng17/src/app/alert-select/alert-select.component.ts b/demo-ng17/src/app/alert-select/alert-select.component.ts new file mode 100644 index 00000000..e6f2c69e --- /dev/null +++ b/demo-ng17/src/app/alert-select/alert-select.component.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; +import { IOption, OptionService } from './options.service'; + + +export interface AlertSelectModel { + title: string; + message: string; +} + +@Component({ + selector: 'alert-select', + template: ` +
+
+

{{title || 'Alert!'}}

+
+
+

this select didn't close on selection

+

+ Selected option: {{selectedCharacter}} + + +

+
+
+ +
+
+ ` +}) +export class AlertSelectComponent extends SimpleModalComponent implements AlertSelectModel { + title: string; + message: string; + + characters: Array = this.optionService.getCharacters(); + selectedCharacter = '3'; + + constructor(private readonly optionService: OptionService) { + super(); + } +} diff --git a/demo-ng17/src/app/alert-select/options.service.ts b/demo-ng17/src/app/alert-select/options.service.ts new file mode 100644 index 00000000..13c63839 --- /dev/null +++ b/demo-ng17/src/app/alert-select/options.service.ts @@ -0,0 +1,44 @@ + +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +export interface IOption { + value: string; + label: string; +} + +@Injectable() +export class OptionService { + + private static readonly PLAYER_ONE: Array = [ + { value: '0', label: 'Aech' }, + { value: '1', label: 'Art3mis' }, + { value: '2', label: 'Daito' }, + { value: '3', label: 'Parzival' }, + { value: '4', label: 'Shoto' } + ]; + + getCharacters(): Array { + return this.cloneOptions(OptionService.PLAYER_ONE); + } + + loadCharacters(): Observable> { + return this.loadOptions(OptionService.PLAYER_ONE); + } + + private loadOptions(options: Array): Observable> { + return new Observable((obs) => { + setTimeout(() => { + obs.next(this.cloneOptions(options)); + obs.complete(); + }, 5000); + }); + } + + private cloneOptions(options: Array): Array { + return options.map(option => ({ + value: option.value, + label: option.label + })); + } +} diff --git a/demo-ng17/src/app/alert/alert.component.ts b/demo-ng17/src/app/alert/alert.component.ts new file mode 100644 index 00000000..7c6c8596 --- /dev/null +++ b/demo-ng17/src/app/alert/alert.component.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface AlertModel { + title?: string; + message?: string; +} + +@Component({ + selector: 'alert', + template: ` +
+
+

{{title || 'Alert!'}}

+
+
+

{{message || 'TADAA-AM!'}}

+
+
+ +
+
+ ` +}) +export class AlertComponent extends SimpleModalComponent implements AlertModel { + title: string; + message: string; + constructor() { + super(); + } +} diff --git a/demo-ng17/src/app/app.component.css b/demo-ng17/src/app/app.component.css new file mode 100644 index 00000000..e69de29b diff --git a/demo-ng17/src/app/app.component.html b/demo-ng17/src/app/app.component.html new file mode 100644 index 00000000..aea86744 --- /dev/null +++ b/demo-ng17/src/app/app.component.html @@ -0,0 +1,107 @@ +
+

ngx-simple-modal demo ng17

+
+
+
+
+ Alert example: +
+
+ +
+
+
+
+
+
+ Alert with select example: +
+
+ +
+
+
+
+
+
+ Alert with select example and close when clicking background: +
+
+ +
+
+ Result: + {{selectResult}} +
+
+
+
+
+
+ Confirm example: +
+
+ +
+
+ Result: + {{confirmResult ? 'Accepted': 'Declined'}} +
+
+
+
+
+
+ Prompt example that can be moved: +
+
+ +
+
+ Your name: + {{promptMessage}} +
+
+
+
+
+
+ Close modal by click outside example: +
+
+ +
+
+
+
+
+
+ ESC key closable example: +
+
+ +
+
+
+
+
+
+ Show dialogue in error handler / catch function: +
+
+ +
+
+
+
+
+
+ Show modal from modal: +
+
+ +
+
+
+
diff --git a/demo-ng17/src/app/app.component.ts b/demo-ng17/src/app/app.component.ts new file mode 100644 index 00000000..e2e1b16d --- /dev/null +++ b/demo-ng17/src/app/app.component.ts @@ -0,0 +1,102 @@ +import { Component } from '@angular/core'; +import { SimpleModalService } from 'ngx-simple-modal'; +import { AlertComponent } from './alert/alert.component'; +import { ConfirmComponent } from './confirm/confirm.component'; +import { PromptComponent } from './prompt/prompt.component'; +import { ParentDialogModalComponent } from './parent-dialog/parent-dialog.component'; +import { AlertSelectComponent } from './alert-select/alert-select.component'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], +}) +export class AppComponent { + confirmResult = null; + promptMessage = ''; + selectResult = null; + + constructor(private simpleModalService: SimpleModalService) {} + + showAlert() { + this.simpleModalService.addModal(AlertComponent, { + title: 'Alert title!', + message: 'Alert message!!!', + }); + } + + showAlertWithSelect() { + this.simpleModalService + .addModal( + AlertSelectComponent, + { + title: 'Alert title!', + message: 'Alert message!!!', + }, + { + autoFocus: true, + } + ) + .subscribe(selected => { + this.selectResult = selected; + }); + } + + showAlertWithSelectPlusBClick() { + this.simpleModalService.addModal( + AlertSelectComponent, + { title: 'Alert title!', message: 'Alert message!!!' }, + { closeOnClickOutside: true } + ); + } + + showConfirm() { + this.simpleModalService + .addModal(ConfirmComponent, { + title: 'Confirmation', + message: 'Bla bla confirm some action?', + }) + .subscribe(isConfirmed => { + // Get modal result + this.confirmResult = isConfirmed; + }); + } + + showPrompt() { + this.simpleModalService + .addModal(PromptComponent, { + title: 'Name dialog', + question: 'What is your name?: ', + }, { + draggable: true + }) + .subscribe(message => { + // We get modal result + this.promptMessage = message; + }); + } + + showAlertWithClickOutside() { + this.simpleModalService.addModal( + AlertComponent, + { message: 'Click outside to close dialog' }, + { closeOnClickOutside: true } + ); + } + + showAlertWithCloseByEscapeKey() { + this.simpleModalService.addModal( + AlertComponent, + { message: 'Dialog with close using escape' }, + { closeOnEscape: true } + ); + } + + showAlertThatThrowsError() { + throw new Error('Shown via custom error handler'); + } + + showParentDialog() { + this.simpleModalService.addModal(ParentDialogModalComponent); + } +} diff --git a/demo-ng17/src/app/app.module.ts b/demo-ng17/src/app/app.module.ts new file mode 100644 index 00000000..46aa4261 --- /dev/null +++ b/demo-ng17/src/app/app.module.ts @@ -0,0 +1,51 @@ +import { A11yModule } from '@angular/cdk/a11y'; +import { ErrorHandler, NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { defaultSimpleModalOptions, SimpleModalModule } from 'ngx-simple-modal'; +import { AlertSelectComponent } from './alert-select/alert-select.component'; +import { OptionService } from './alert-select/options.service'; +import { AlertComponent } from './alert/alert.component'; +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm/confirm.component'; +import { CustomErrorHandler } from './custom-error/custom-error-handler'; +import { ParentDialogModalComponent } from './parent-dialog/parent-dialog.component'; +import { PromptComponent } from './prompt/prompt.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + A11yModule, + SimpleModalModule.forRoot( + { container: 'modal-container' }, + { + ...defaultSimpleModalOptions, + ...{ + closeOnEscape: false, + closeOnClickOutside: false, + animationDuration: 0, + autoFocus: true, + draggable: false + }, + } + ), + ], + declarations: [ + AppComponent, + AlertComponent, + AlertSelectComponent, + ConfirmComponent, + PromptComponent, + ParentDialogModalComponent, + ], + providers: [ + { + provide: ErrorHandler, + useClass: CustomErrorHandler, + }, + OptionService, + ], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/demo-ng17/src/app/confirm/confirm.component.ts b/demo-ng17/src/app/confirm/confirm.component.ts new file mode 100644 index 00000000..4ee23ffc --- /dev/null +++ b/demo-ng17/src/app/confirm/confirm.component.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface ConfirmModel { + title: string; + message: string; +} + +@Component({ + selector: 'confirm', + template: ` +
+
+

{{title || 'Confirm'}}

+
+
+

{{message || 'Are you sure?'}}

+
+
+ + +
+
+ ` +}) +export class ConfirmComponent extends SimpleModalComponent implements ConfirmModel { + title: string; + message: string; + constructor() { + super(); + } + confirm() { + // on click on confirm button we set dialog result as true, + // ten we can get dialog result from caller code + this.result = true; + this.close(); + } + cancel() { + this.result = false; + this.close(); + } +} diff --git a/demo-ng17/src/app/custom-error/custom-error-handler.ts b/demo-ng17/src/app/custom-error/custom-error-handler.ts new file mode 100644 index 00000000..437ff91b --- /dev/null +++ b/demo-ng17/src/app/custom-error/custom-error-handler.ts @@ -0,0 +1,29 @@ +import { ErrorHandler, Injectable, Injector, isDevMode, ApplicationRef } from '@angular/core'; +import { SimpleModalService } from 'ngx-simple-modal'; + +import { AlertComponent } from '../alert/alert.component'; + + +@Injectable() +export class CustomErrorHandler implements ErrorHandler { + + constructor(private injector: Injector) { } + + handleError(error) { + const modalService = this.injector.get(SimpleModalService); + const appRef = this.injector.get(ApplicationRef); + const message = error.message ? error.message : error.toString(); + + if (isDevMode()) { + console.error('Custom error : ' + error); + } + + modalService.addModal(AlertComponent, { + title: 'An error occurred', + message: message, + }); + + // ng5 error handler does not trigger change detection so we have to do this + setTimeout(() => appRef.tick(), 0); + } +} diff --git a/demo-ng17/src/app/parent-dialog/parent-dialog.component.ts b/demo-ng17/src/app/parent-dialog/parent-dialog.component.ts new file mode 100644 index 00000000..039c0dcc --- /dev/null +++ b/demo-ng17/src/app/parent-dialog/parent-dialog.component.ts @@ -0,0 +1,41 @@ +import { Component } from '@angular/core'; +import { SimpleModalComponent, SimpleModalService } from 'ngx-simple-modal'; + +import { ConfirmComponent } from '../confirm/confirm.component'; + + +@Component({ + selector: 'parent-modal', + template: ` +
+
+

Parent dialog

+
+
+

bla-bla

+

bla-bla

+

bla-bla

+
+
+ +
+
+ ` +}) +export class ParentDialogModalComponent extends SimpleModalComponent { + + constructor(private simpleModalService: SimpleModalService) { + super(); + } + + confirm() { + this.simpleModalService.addModal(ConfirmComponent, { + title: 'Confirm', + message: 'Are you sure you want close dialog?' + }).subscribe((isConfirmed) => { + if (isConfirmed) { + this.close(); + } + }); + } +} diff --git a/demo-ng17/src/app/prompt/prompt.component.ts b/demo-ng17/src/app/prompt/prompt.component.ts new file mode 100644 index 00000000..ecf4b952 --- /dev/null +++ b/demo-ng17/src/app/prompt/prompt.component.ts @@ -0,0 +1,43 @@ +import { Component, ViewChild, ElementRef } from '@angular/core'; +import { SimpleModalComponent } from 'ngx-simple-modal'; + +export interface PromptModel { + title: string; + question: string; +} + +@Component({ + selector: 'prompt', + template: ` +
+
+

{{ title || 'Prompt' }}

+
+
+ + +
+
+ + +
+
+ `, +}) +export class PromptComponent extends SimpleModalComponent + implements PromptModel { + @ViewChild('handle', { static: true }) handle: ElementRef; + + title: string; + question: string; + message = ''; + + constructor() { + super(); + } + + apply() { + this.result = this.message; + this.close(); + } +} diff --git a/demo-ng17/src/assets/.gitkeep b/demo-ng17/src/assets/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/demo-ng17/src/browserslist b/demo-ng17/src/browserslist new file mode 100644 index 00000000..8e09ab49 --- /dev/null +++ b/demo-ng17/src/browserslist @@ -0,0 +1,9 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# For IE 9-11 support, please uncomment the last line of the file and adjust as needed +> 0.5% +last 2 versions +Firefox ESR +not dead +# IE 9-11 \ No newline at end of file diff --git a/demo-ng17/src/environments/environment.prod.ts b/demo-ng17/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/demo-ng17/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/demo-ng17/src/environments/environment.ts b/demo-ng17/src/environments/environment.ts new file mode 100644 index 00000000..012182ef --- /dev/null +++ b/demo-ng17/src/environments/environment.ts @@ -0,0 +1,15 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * In development mode, to ignore zone related error stack frames such as + * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can + * import the following file, but please comment it out in production mode + * because it will have performance impact when throw error + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/demo-ng17/src/favicon.ico b/demo-ng17/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- + + + + Simple Modal Demo + + + + + + + + + + + Loading... + + diff --git a/demo-ng17/src/karma.conf.js b/demo-ng17/src/karma.conf.js new file mode 100644 index 00000000..b6e00421 --- /dev/null +++ b/demo-ng17/src/karma.conf.js @@ -0,0 +1,31 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../coverage'), + reports: ['html', 'lcovonly'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; \ No newline at end of file diff --git a/demo-ng17/src/main.ts b/demo-ng17/src/main.ts new file mode 100644 index 00000000..91ec6da5 --- /dev/null +++ b/demo-ng17/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/demo-ng17/src/polyfills.ts b/demo-ng17/src/polyfills.ts new file mode 100644 index 00000000..d46fa85a --- /dev/null +++ b/demo-ng17/src/polyfills.ts @@ -0,0 +1,76 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +//import 'core-js/es7/reflect'; + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + +// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame +// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick +// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + +/* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/demo-ng17/src/styles.css b/demo-ng17/src/styles.css new file mode 100644 index 00000000..90d4ee00 --- /dev/null +++ b/demo-ng17/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/demo-ng17/src/test.ts b/demo-ng17/src/test.ts new file mode 100644 index 00000000..475c1038 --- /dev/null +++ b/demo-ng17/src/test.ts @@ -0,0 +1,20 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const global: any; + +// First, initialize the Angular testing environment. +getTestBed().resetTestEnvironment(); +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = global.requireContext('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/demo-ng17/src/tsconfig.app.json b/demo-ng17/src/tsconfig.app.json new file mode 100644 index 00000000..8d35dfac --- /dev/null +++ b/demo-ng17/src/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "es2015", + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/demo-ng17/src/tsconfig.spec.json b/demo-ng17/src/tsconfig.spec.json new file mode 100644 index 00000000..fbe7e320 --- /dev/null +++ b/demo-ng17/src/tsconfig.spec.json @@ -0,0 +1,16 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "module": "commonjs", + "types": [ + "jasmine", + "node" + ] + }, + "files": [], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/demo-ng17/src/tslint.json b/demo-ng17/src/tslint.json new file mode 100644 index 00000000..52e2c1a5 --- /dev/null +++ b/demo-ng17/src/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ] + } +} diff --git a/demo-ng17/tsconfig.json b/demo-ng17/tsconfig.json new file mode 100644 index 00000000..aa600300 --- /dev/null +++ b/demo-ng17/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "typeRoots": [ + "node_modules/@types" + ], + "target": "es2015", + "lib": [ + "es2019", + "dom" + ] + } +} diff --git a/package.json b/package.json index 3dc7b69b..4155d04a 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "ngx-simple-modal", - "version": "16.0.0", + "version": "17.0.0", "description": "A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.", "scripts": { "demo-ng5": "cd demo-ng5 && npm i && ng serve", "demo-ng6": "cd demo-ng6 && npm i && ng serve", "demo-ng8": "cd demo-ng8 && npm i && ng serve", "demo-ng16": "cd demo-ng16 && npm i && ng serve", + "demo-ng17": "cd demo-ng17 && npm i && ng serve", "lint": "eslint -c .eslintrc.js --ext .ts src/simple-modal/**/*.ts", "prepublish": "npm run build", "build": "npm run lint && ng-packagr --config src/tsconfig.build.json", @@ -48,17 +49,17 @@ }, "homepage": "https://github.com/kevcjones/ngx-simple-modal#readme", "devDependencies": { - "@angular-eslint/eslint-plugin": "16.0.2", - "@angular-eslint/eslint-plugin-template": "16.0.2", - "@angular/animations": "16.0.3", - "@angular/cli": "16.0.3", - "@angular/common": "16.0.3", - "@angular/compiler": "16.0.3", - "@angular/compiler-cli": "16.0.3", - "@angular/core": "16.0.3", - "@angular/platform-browser": "16.0.3", - "@angular/platform-browser-dynamic": "16.0.3", - "@angular/platform-server": "16.0.3", + "@angular-eslint/eslint-plugin": "17.1.1", + "@angular-eslint/eslint-plugin-template": "17.1.1", + "@angular/animations": "17.0.8", + "@angular/cli": "17.0.8", + "@angular/common": "17.0.8", + "@angular/compiler": "17.0.8", + "@angular/compiler-cli": "17.0.8", + "@angular/core": "17.0.8", + "@angular/platform-browser": "17.0.8", + "@angular/platform-browser-dynamic": "17.0.8", + "@angular/platform-server": "17.0.8", "@types/jest": "29.5.1", "@types/node": "20.2.5", "@typescript-eslint/eslint-plugin": "5.59.7", @@ -67,13 +68,13 @@ "eslint-config-prettier": "8.8.0", "fs-extra": "11.1.1", "jest": "29.5.0", - "jest-preset-angular": "13.1.1", + "jest-preset-angular": "13.1.5", "ts-jest": "29.1.0", - "ng-packagr": "16.0.1", + "ng-packagr": "17.0.3", "rxjs": "7.8.1", "tslib": "2.5.2", - "typescript": "5.0.4", - "zone.js": "0.13.0" + "typescript": "5.2.2", + "zone.js": "0.14.2" }, "jest": { "preset": "jest-preset-angular",