'\n})\nexport class HelloComponent {}\n```\n\n```typescript\nthis.overlay = this._toppy\n .position(position)\n .content(HelloComponent) // <==\n .create();\n```\n\n> Dont forget to add host component in `entryComponents` in module\n\n### Positions\n\nPosition determines the location and size of the overlay. There are four positions:\n\n**Relative position**\n\nOverlay position that is relative to specific element. These are used in `tooltips`, `popovers`, `dropdowns`, `menus`\n\n```typescript\nnew RelativePosition({\n src: HTMLElement, // target element\n placement: OutsidePlacement, // location of the content\n width: string | number, // content width eg, `auto`, 150, `30%`\n height: string | number, // content height eg, `auto`, 150, `30%`\n autoUpdate: boolean // update position when window scroll/resize/drag\n});\n```\n\nRelative position supports 12 placements:\n\n```typescript\nOutsidePlacement.BOTTOM;\nOutsidePlacement.BOTTOM_LEFT;\nOutsidePlacement.BOTTOM_RIGHT;\nOutsidePlacement.LEFT;\nOutsidePlacement.LEFT_BOTTOM;\nOutsidePlacement.LEFT_TOP;\nOutsidePlacement.RIGHT;\nOutsidePlacement.RIGHT_BOTTOM;\nOutsidePlacement.RIGHT_TOP;\nOutsidePlacement.TOP;\nOutsidePlacement.TOP_LEFT;\nOutsidePlacement.TOP_RIGHT;\n```\n\n**Global position**\n\nOverlay position that is relative to window viewport. These are used in `modals`, `alerts`, `toastr`\n\n```typescript\nnew GlobalPosition({\n placement: InsidePlacement, // location of the content.\n width: string | number, // content width eg, `auto`, `150`, `30%`\n height: string | number, //content height eg, `auto`, 150, `30%`\n offset: number // oustide space of the content, in px\n});\n```\n\nGlobal position supports 9 placements:\n\n```typescript\nInsidePlacement.BOTTOM;\nInsidePlacement.BOTTOM_LEFT;\nInsidePlacement.BOTTOM_RIGHT;\nInsidePlacement.LEFT;\nInsidePlacement.RIGHT;\nInsidePlacement.TOP;\nInsidePlacement.TOP_LEFT;\nInsidePlacement.TOP_RIGHT;\nInsidePlacement.CENTER;\n```\n\n**Slide position**\n\nOverlay position that is relative to window viewport. These are used in `side panels`, `sidebars`, `blade`\n\n```typescript\nnew SlidePosition({\n placement: SlidePlacement, // rigth or left\n width: string // width eg, '300px' or '30%'\n});\n```\n\nSlide position supports 2 placements:\n\n```typescript\nSlidePlacement.LEFT;\nSlidePlacement.RIGHT;\n```\n\n**Fullscreen position**\n\nOverlay that occupies complete size of the viewport.\n\n```typescript\nnew FullScreenPosition();\n```\n\n### Configuration\n\n```typescript\nthis.toppy\n .position(position: ToppyPosition)\n .config(configuration: ToppyConfig = {})\n .content('hello')\n .create();\n```\n\n| `property` | `for` |\n| ------------------------ | -------------------------------------------------------------------------------------- |\n| **backdrop** | `boolean` · whether to show backdrop layer · default: `false` |\n| **closeOnEsc** | `boolean` · clicking Escape button will close overlay · default: `false` |\n| **closeOnDocClick** | `boolean` · dismiss on clicking outside of content · default: `false` |\n| **listenWindowEvents** | `boolean` · auto adjust the position on scroll/resize · default: `true` |\n| **containerClass** | `string` · overlay container class name · default: `t-overlay` |\n| **wrapperClass** | `string` · overlay wrapper class name · default: `''` |\n| **backdropClass** | `string` · overlay backdrop class name · default: `''` |\n| **bodyClass** | `string` · body class when overlay is open · default: `t-open` |\n| **windowResizeCallback** | `function` · triggered on window scroll |\n| **docClickCallback** | `function` · triggered on document click |\n\n### Component communication\n\n#### Component Data\n\nWhen you host a component, you can control the overlay through `ToppyOverlay` service. Using this service you can access all properties that is provided in content. Also the properties comes with `close`.\n\n```typescript\nthis.overlay = this._toppy\n .position(position)\n .content(HelloComponent, { propName: 'toppy-test-prop' })\n .create();\n\nthis.overlay.listen('t_compins').subscribe(comp => {\n console.log('component is ready!', comp); // returns HelloComponent\n});\n```\n\n```typescript\n// host component\n@Component({\n template: '
Some text
'\n})\nexport class HelloComponent {\n constructor(public overlay: ToppyOverlay) {\n console.log(this.overlay.props.propName); // will return 'toppy-test-prop'\n }\n\n close() {\n this.overlay.close();\n }\n}\n```\n\n#### Template Data\n\nThis is very similar to above one. When you use template as a content, you can pass additional data to it.\n\n```typescript\nthis.overlay = this._toppy\n .position(position)\n .content(template, { name: 'Johny' })\n .create();\n```\n\nThen in your template you can refer the data like this,\n\n```html\n\n
Hello !
\n \n\n```\n\nMethod `close` is automatically binded.\n\n#### Plain text\n\nWhen you use Plain text as a content, optionally you can able to set a class name to that `div` block.\n\n```typescript\nthis.overlay = this._toppy\n .position(position)\n .content('some content', { class: 'tooltip' })\n .create();\n```\n\n### API\n\n```typescript\n\n/* Toppy */\n\nToppy.position(position: ToppyPosition):Toppy\n\nToppy.config(config: ToppyConfig):Toppy\n\nToppy.content(data: ContentData, props: ContentProps = {}):Toppy\n\nToppy.create(key: string = ''):ToppyControl\n\nToppy.getCtrl(id: string):ToppyControl\n\nToppy.destroy():void\n```\n\n```typescript\n\n/* ToppyControl */\n\nToppyControl.open():void\n\nToppyControl.close():void\n\nToppyControl.toggle():void\n\nToppyControl.onDocumentClick():Observable\n\nToppyControl.onWindowResize():Observable\n\nToppyControl.changePosition(newPosition: ToppyPosition): void\n\nToppyControl.updateContent(content: ContentData, props: ContentProps = {}):void\n\nToppyControl.updatePosition(config:object):ToppyControl\n\nToppyControl.listen(eventName:string):Observable\n```\n\n```typescript\n/* events */\n\n`t_open`, `t_close`, `t_dynpos`, `t_detach`, `t_posupdate`, `t_compins`;\n```\n\n### Contribution\n\nAny kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. :)\n\n### Credits\n\n▶ Icons ━ [icons8](https://icons8.com/icons/cotton)\n\n▶ Illustrations ━ [undraw](https://undraw.co/illustrations)\n\n▶ Font icons ━ [feathers](https://feathericons.com)\n\n### Issues\n\nFound a bug? Have some idea? Or do you have questions? File it [here](https://github.com/lokesh-coder/toppy/issues)\n\n### Licence\n\nMIT\n","readmeFilename":"README.md","description":"Overlay library for Angular 7+","homepage":"https://github.com/lokesh-coder/toppy","keywords":["angular","dropdown","modal","overlay","popover","popup","sidebar","tooltip"],"repository":{"type":"git","url":"git+https://github.com/lokesh-coder/toppy.git"},"author":{"name":"Lokesh Rajendran","email":"mexican.dirtyfellow@gmail.com","url":"https://github.com/lokesh-coder"},"bugs":{"url":"https://github.com/lokesh-coder/toppy/issues"},"license":"MIT"}
![\"Toppy\"](\"./docs/assets/toppy-logo.png\"){kind=logo}
![\"Github](\"https://img.shields.io/github/release/lokesh-coder/toppy.svg?style=flat-square&colorA=0C0B0C&colorB=2C282C\")
\n ![\"Licence\"](\"https://img.shields.io/npm/l/toppy.svg?style=flat-square&colorA=0C0B0C&colorB=2C282C\")
\n ![\"Downloads\"](\"https://img.shields.io/npm/dm/toppy.svg?style=flat-square&colorA=0C0B0C&colorB=2C282C\")
\n