[
{
"path": ".gitignore",
"content": "node_modules/\n*.iml\n*.xml\n.idea\ndist\ndist-tsc\ntest_dist"
},
{
"path": ".npmignore",
"content": ".idea\nexample\nnode_modules\n/src\n/*.*\n./dist/dist-tsc\n./dist/example"
},
{
"path": ".travis.yml",
"content": "language: node_js\nnode_js:\n - '10'\ndist: trusty\naddons:\n apt:\n packages:\n # This is required to run new chrome on old trusty\n - libnss3\nnotifications:\n email: false\ncache:\n directories:\n - node_modules\n# allow headful tests\nbefore_install:\n# Enable user namespace cloning\n- \"sysctl kernel.unprivileged_userns_clone=1\"\n# Launch XVFB\n- \"export DISPLAY=:99.0\"\n- \"sh -e /etc/init.d/xvfb start\""
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2016-2017 Jacob Harasimo.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
},
{
"path": "README.md",
"content": "# ngx-popper \n\n[](https://www.npmjs.com/package/ngx-popper) \n[](https://www.npmjs.com/package/ngx-popper) \n[](https://github.com/MrFrankel/ngx-popper/blob/master/LICENSE) [](https://greenkeeper.io/)\n \n \n[](https://travis-ci.org/MrFrankel/ngx-popper)\n\nngx-popper is an angular wrapper for the [Popper.js](https://popper.js.org/) library.\n\n## Changes\n\nAs of version 6.0.0 popper content runs in onPush change detection strategy, therefore forceChangeDetection is no longer necessary and is removed\n\n\nAs of version 4.0.0 ngx-popper now use innerHTML binding for string popper i.e:\n```HTML\n\n```\n\nThis should make no difference but you should be aware.\n\nAs of version 4.0.0 popper.model is now popper-model, due to some angular-cli issues, if you are referencing this please update your references.\n\n### Installation\n\nnode and npm are required to run this package.\n\n1. Use npm/yarn to install the package:\n\n ```terminal\n $ npm install popper.js --save\n $ npm install ngx-popper --save \n ```\n \n Or \n \n ```terminal\n $ yarn add popper.js --save\n $ yarn add ngx-popper --save \n ```\n\n2. You simply add into your module `NgxPopperModule`:\n\n ```typescript\n import {NgxPopperModule} from 'ngx-popper';\n \n @NgModule({\n // ...\n imports: [\n // ...\n NgxPopperModule\n ]\n })\n ```\n \nSystemJS \n```\n System.config({\n paths: {\n // paths serve as alias\n 'npm:': 'libs/'\n },\n // map tells the System loader where to look for things\n map: {\n ... ,\n 'ngx-popper': 'npm:ngx-popper',\n 'popper-directive.js': 'npm:ngx-popper',\n 'popper.module': 'npm:ngx-popper',\n },\n // packages tells the System loader how to load when no filename and/or no extension\n packages: {\n ... ,\n 'ngx-popper': {\n main: 'index.js',\n defaultExtension: 'js'\n },\n 'popper.js': {\n main: 'popper-directive.js',\n defaultExtension: 'js'\n },\n 'popper.module': {\n main: './popper.module.js',\n defaultExtension: 'js'\n }\n }\n });\n\n```\n \n\n3. Add to view:\n\n ```HTML \n
\n
Hey!
\n
Choose where to put your popper!
\n
\n \n
Popper on bottom
\n \n ```\n\n4. As text:\n ```HTML\n
\n
Pop
\n
on the bottom
\n
\n ```\n\n ```HTML\n
\n
Pop
\n
on the bottom
\n
\n ```\n \n 5. Position fixed, breaking overflow:\n ```HTML\n
\n What are you waiting for? Select a popper from that dropdown. \n Placing poppers around elements is just that easy!\n
\n\n
\n\n
\n\n
\n\n \n \n
\n
\n
\n
\n
Scroll me
\n
up and down
\n
\n \n
I follow it
\n
staying between boundaries
\n \n\n
\n
\n\n
\n
\n
Popper on scrolling container
\n
\n In this example we have a relative div which contains a div with overflow: scroll.\n Inside it, there are our popper and reference elements.\n
\n\n\n
\n \n \n
\n \n
Drag me
\n
on the edges
\n
\n
\n \n
Flipping popper
\n
which never flips to right
\n \n
\n
Custom flip behavior
\n
\n Try dragging the reference element on the left side, its popper will move on its bottom edge. Then,\n try to move the reference element on the bottom left corner, it will move on its top edge.\n
\n\n\n
\n \n \n
\n
\n
Reference
\n
\n \n
\n
Shifted popper
\n
on start
\n
\n \n
\n
\n
Shifted poppers
\n
\n Shift your poppers on start or end of its reference element side.\n
\n
\n \n \n
\n
\n
Pop
\n
on the bottom
\n
\n \n
\n
Popper on bottom
\n
Flips when hits viewport
\n
\n \n\n
\n
\n
Viewport boundaries
\n
\n By default, poppers use as boundaries the page viewport.\n Scroll the page to see the popper flip when hits the page viewport margins.\n