{
"_from": "ng2-opd-popup",
"_id": "ng2-opd-popup@1.1.21",
"_inBundle": false,
"_integrity": "sha1-qOxFQq5E6KAR2cMDjtaLGb86VfM=",
"_location": "/ng2-opd-popup",
"_phantomChildren": {
"mkdirp": "0.5.1",
"reflect-metadata": "0.1.10",
"source-map": "0.5.7",
"source-map-support": "0.4.16",
"symbol-observable": "1.0.4"
},
"_requested": {
"escapedName": "ng2-opd-popup",
"fetchSpec": "latest",
"name": "ng2-opd-popup",
"raw": "ng2-opd-popup",
"rawSpec": "",
"registry": true,
"saveSpec": null,
"type": "tag"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/ng2-opd-popup/-/ng2-opd-popup-1.1.21.tgz",
"_shasum": "a8ec4542ae44e8a011d9c3038ed68b19bf3a55f3",
"_spec": "ng2-opd-popup",
"_where": "/home/tis/projects/Petro",
"author": {
"email": "olepetter@dahlmann.no",
"name": "Ole Petter Dahlmann",
"url": "https://olepetterdahlmann.com/"
},
"bundleDependencies": false,
"dependencies": {
"@angular/common": "2.3.0",
"@angular/compiler": "2.2.4",
"@angular/compiler-cli": "2.3.0",
"@angular/core": "2.3.0",
"@angular/forms": "2.3.0",
"@angular/http": "2.3.0",
"@angular/platform-browser": "2.3.0",
"@angular/platform-browser-dynamic": "2.3.0",
"@angular/router": "3.2.4",
"angular-router-loader": "^0.4.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.7.2"
},
"deprecated": false,
"description": "Popup component for Angular 2",
"devDependencies": {
"@angular-cli/ast-tools": "^1.0.9",
"@angular/cli": "^1.0.0",
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^3.0.2",
"@ngtools/webpack": "^1.1.6",
"@types/jasmine": "2.2.29",
"@types/lodash": "4.14.50",
"@types/node": "^6.0.38",
"@types/selenium-webdriver": "2.53.33",
"angular2-template-loader": "^0.6.0",
"autoprefixer": "^6.3.2",
"awesome-typescript-loader": "^2.2.4",
"codelyzer": "1.0.0-beta.3",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.25.0",
"del": "^2.2.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-bump": "^2.5.1",
"gulp-mocha": "^3.0.0",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.3.2",
"gulp-shell": "^0.5.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-typescript": "^2.13.6",
"gulpclass": "^0.1.1",
"html-loader": "^0.4.0",
"html-webpack-plugin": "^2.8.1",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^2.4.0",
"json-loader": "^0.5.3",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.3",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.8.0",
"node-sass": "^3.4.2",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "^1.1.0",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.4",
"rimraf": "^2.5.1",
"sass-loader": "^4.0.0",
"shelljs": "^0.7.0",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"tslint": "^3.4.0",
"tslint-loader": "^2.1.0",
"typedoc": "^0.5.1",
"typescript": "2.0.6",
"url-loader": "^0.5.6",
"webpack": "^2.1.0-beta.28",
"webpack-dev-server": "2.1.0-beta.9"
},
"keywords": [
"angular 2",
"angular 2 popup",
"dialog",
"ng2",
"popup"
],
"license": "MIT",
"name": "ng2-opd-popup",
"optionalDependencies": {},
"readme": "\r\n\r\n## Popup component for Angular 2\r\n\r\n> - [ONLINE DEMO](http://dahlmann.no/ng2-opd-popup-sample/)\r\n> - Source code for demo project [HERE](https://github.com/opdahlmann/ng2-opd-popup-sample)\r\n\r\n\r\n\r\nin your module include:\r\n```javascript\r\nimport {PopupModule} from 'ng2-opd-popup';\r\n\r\n@NgModule({\r\n imports: [\r\n ...\r\n PopupModule.forRoot()\r\n ],\r\n declarations: [\r\n ...\r\n ],\r\n providers: [\r\n ...\r\n ],\r\n bootstrap: [...]\r\n})\r\n```\r\n\r\nin your view (html)\r\n```html\r\n\r\n Add your custom html elements here\r\n\r\n```\r\n\r\nIn your component:\r\n\r\n```javascript\r\nimport {Popup} from 'ng2-opd-popup';\r\n\r\nexport class YourComponent {\r\n constructor(private popup:Popup) { }\r\n\r\n ClickButton(){\r\n this.popup.show();\r\n }\r\n}\r\n```\r\n\r\nIf you want to have multiple popups in your page with different html content you can use @ViewChild, in that case you don't need to inject it in your constructor\r\n\r\nin your view (html)\r\n```html\r\n\r\n Add your custom html elements here\r\n\r\n\r\n\r\n Add your other custom html elements here\r\n\r\n```\r\nIn your component:\r\n\r\n```javascript\r\nimport { Component, ViewChild } from '@angular/core';\r\nimport {Popup} from 'ng2-opd-popup';\r\n\r\nexport class YourComponent {\r\n \r\n @ViewChild('popup1') popup1: Popup;\r\n @ViewChild('popup2') popup2: Popup;\r\n \r\n constructor() { }\r\n\r\n ClickButton(){\r\n this.popup1.show();\r\n }\r\n\r\n ClickAnotherButton(){\r\n this.popup2.show();\r\n }\r\n}\r\n```\r\n\r\nOptions:\r\n\r\nYou can set the following options for your popup:\r\n\r\n```javascript\r\nthis.popup.options = {\r\n header: \"Your custom header\",\r\n color: \"#5cb85c\", // red, blue....\r\n widthProsentage: 40, // The with of the popou measured by browser width\r\n animationDuration: 1, // in seconds, 0 = no animation\r\n showButtons: true, // You can hide this in case you want to use custom buttons\r\n confirmBtnContent: \"OK\", // The text on your confirm button\r\n cancleBtnContent: \"Cancel\", // the text on your cancel button\r\n confirmBtnClass: \"btn btn-default\", // your class for styling the confirm button\r\n cancleBtnClass: \"btn btn-default\", // you class for styling the cancel button\r\n animation: \"fadeInDown\" // 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'bounceIn','bounceInDown'\r\n};\r\n\r\n this.popup.show(this.popup.options);\r\n```\r\n\r\nEvents:\r\n\r\nYou can subscribe to the confirm and cancel button event.\r\n\r\n```html\r\n\r\n Add your own html elements here\r\n\r\n```\r\n\r\n\r\n```javascript\r\nYourConfirmEvent(){\r\n alert('You cliked confirm');\r\n}\r\n\r\nYourCancelEvent(){\r\n alert('You cliked cancel');\r\n}\r\n```",
"readmeFilename": "README.md",
"scripts": {
"build": "rimraf dist && ngc -p src/tsconfig.aot.json && gulp",
"clean": "gulp clean",
"lint": "tslint --force \"src/**/*.ts\"",
"package": "gulp bumpVersion && gulp postBuild",
"posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
"pretest": "npm run lint",
"test": "karma start",
"test-watch": "karma start --no-single-run --auto-watch"
},
"version": "1.1.21"
}