{"_id":"@teedeez/tdz-anchored-floating-box","_rev":"25-97abf00202c70d6b2197df73176d9c4f","name":"@teedeez/tdz-anchored-floating-box","dist-tags":{"latest":"2.1.3"},"versions":{"2.1.2":{"name":"@teedeez/tdz-anchored-floating-box","version":"2.1.2","author":{"name":"Nhuy Van"},"repository":{"type":"git","url":"git+https://github.com/nhuyvan/tdz-anchored-floating-box.git"},"private":false,"description":"An Angular service that renders a template ref or a component anchored to some element.","keywords":["Angular","Angular 2","Anchored box","popup","popup modal"],"peerDependencies":{"@angular/common":"^12.2.0","@angular/core":"^12.2.0"},"dependencies":{"tslib":"^2.3.0"},"main":"bundles/teedeez-tdz-anchored-floating-box.umd.js","module":"fesm2015/teedeez-tdz-anchored-floating-box.js","es2015":"fesm2015/teedeez-tdz-anchored-floating-box.js","esm2015":"esm2015/teedeez-tdz-anchored-floating-box.js","fesm2015":"fesm2015/teedeez-tdz-anchored-floating-box.js","typings":"teedeez-tdz-anchored-floating-box.d.ts","sideEffects":false,"bugs":{"url":"https://github.com/nhuyvan/tdz-anchored-floating-box/issues"},"homepage":"https://github.com/nhuyvan/tdz-anchored-floating-box#readme","_id":"@teedeez/tdz-anchored-floating-box@2.1.2","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-q6zCeX1/n0FuK0of5sti++wFO5KBg+Wkxec6MGvSpnJAuffU+0J3HRFJFqjyNNb2Y1bypUvg7Z6vThUP7jcFzQ==","shasum":"29a858de8d49d68d812ca5920226d6ee39c819cb","tarball":"https://registry.npmjs.org/@teedeez/tdz-anchored-floating-box/-/tdz-anchored-floating-box-2.1.2.tgz","fileCount":25,"unpackedSize":162421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLYq9CRA9TVsSAnZWagAAwAMP/iII3YmQLWyKplm+TMCQ\n3BvWux68gYLY1LLlEMQWhFOphBqyKta/oyxMI9gQ77hnuhj4er3IZVss6GK8\nS7LCm0QSfM/j+l7IU57zjvsjgogCb/Ms/jB9huweqUxEtCSeLFXgqHM6lSZD\nue84RCU7uyXV6CjC6Q4qeksutmeaw7ebHDNKhW2vmtkYrTyZAeA9pDfdHI1J\nnIk9OHBy5woKL7EICmY02Pn6Ikaqu29jQ9H3kRNBBY/au2Vbm/Id7g9uFd1Q\nKegMHEOyEqRK1v490FRPKf9/2yICGpVkMjtv69fnn2L0JN+rzlJdo6W4l9UX\ngIpxO46nUsa+d0yZWg1szjU8R3wpEQvG6a4O3ihWtjiLzVQDt1gibxi9kg7s\nkJs/Gy3F9AxD2ok/xwFTmfVG4KNshvNNYFo5zPYMGpxmRBapGjaCDgmBHTcz\nLaax9idVF0Crj5MZMZ8y1TuE1E8ntxDT7qgA7U4h9UZDNNl1wx6ttZmKcHLw\nSEnP6fp5SBi5BmTNZS3HyuhhlECHmbGsqEtmjOwk5eM3/vh38bYnIbOPPnXP\nBOeX15H3AYRNJ42YK/Ubl0OZiDB2wL0QJvMyfiGo/YoTeUpoI4v2Y30GhZyS\nGXLBrFgK+av0NwvZeytyyiT2PbJJjB0TCYUY2A129X2l9a2KlmHJM/pcKWOb\nRf97\r\n=i7Z8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxJJpXChCVfoj3IRdHhAMoElRkBnqYEayialBzrXbwvAiBG+VDzVakgzwNa32Zd8GwvFkRZNE9dZgtn/T7XkrfrZw=="}]},"_npmUser":{"name":"teedeez","email":"tinkering.programmer@gmail.com"},"directories":{},"maintainers":[{"name":"teedeez","email":"tinkering.programmer@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tdz-anchored-floating-box_2.1.2_1630374589581_0.7321593299544229"},"_hasShrinkwrap":false},"2.1.3":{"name":"@teedeez/tdz-anchored-floating-box","version":"2.1.3","author":{"name":"Nhuy Van"},"repository":{"type":"git","url":"git+https://github.com/nhuyvan/tdz-anchored-floating-box.git"},"private":false,"description":"An Angular service that renders a template ref or a component anchored to some element.","keywords":["Angular","Angular 2","Anchored box","popup","popup modal"],"peerDependencies":{"@angular/common":"^12.2.0","@angular/core":"^12.2.0"},"dependencies":{"tslib":"^2.3.0"},"main":"bundles/teedeez-tdz-anchored-floating-box.umd.js","module":"fesm2015/teedeez-tdz-anchored-floating-box.js","es2015":"fesm2015/teedeez-tdz-anchored-floating-box.js","esm2015":"esm2015/teedeez-tdz-anchored-floating-box.js","fesm2015":"fesm2015/teedeez-tdz-anchored-floating-box.js","typings":"teedeez-tdz-anchored-floating-box.d.ts","sideEffects":false,"bugs":{"url":"https://github.com/nhuyvan/tdz-anchored-floating-box/issues"},"homepage":"https://github.com/nhuyvan/tdz-anchored-floating-box#readme","_id":"@teedeez/tdz-anchored-floating-box@2.1.3","_nodeVersion":"14.17.5","_npmVersion":"6.14.14","dist":{"integrity":"sha512-qYHpXo8llFbfzlYGlueCMdZwWvR7Y7stexzqi0HnwQmjnzJyTut7DjjJPmr3UYEE+5ph0gMHWjkknpEWk5veXQ==","shasum":"2c328b8cdeb5f35cf4ee9bae0a81b92692e3c475","tarball":"https://registry.npmjs.org/@teedeez/tdz-anchored-floating-box/-/tdz-anchored-floating-box-2.1.3.tgz","fileCount":25,"unpackedSize":162421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2dfrCRA9TVsSAnZWagAAwXoP/0T/ouag0DX0W85A2LiC\nj/IHs0FPE8h3Y6sSzQmAPyn0sEoZUnD889RU78DpJRJSQtbHl55TAd9nX/am\nAS5wt2WcGKGflUnYmCDn4ATrJnx7Y9GPZw0GZ/saNLxEaA9pyaU/6On4pcnN\nu79EShINExCKyhPwUZbLxwvmCBOZUKWecXV+/+rMZY9k54yf6b0Y1pyCRupv\nkJ0Mq7fuSl2YlkyqVZHD3ps9WiHIbCCu/q+PQ2zfdSNR9O0aZzTNLQRULc9Q\nBydU5cIypQepsYtoZ1IfH9knTeh0COEQxNz/gdme4D6Au5OpCSZ9HxnL3p2r\nF8GzvhM5Q7ON1ND2uccK+vW83Xd1PYJZJwnbUrrIxvMHHX/33I52YrSTNUKl\nojZivmWw9A2xnDKmBjbaYyZjKxRLMAtu7PKhIT8rgytxia7QqllUYFc/ri76\n3XvT/ctEioGWZ3XACgW0DSD06PE2xcvb3zo4ddfoCkJKVHMwuV5JTacJ3bPL\nZdV4kR3PtGS9p9iO09+/4W8VIkrcHCJsw3Of2XHwbg9DkhgEcjGvjOBpfMfG\nZtJsQJHdQs51GY3kJZ2WBlQyfuxJr9EDfOFToJ7t9Z/6NtuwYdKDxlVLkCJk\n5J3Or3PSon/qa6k3SpfR7V/dFDb3clfRar4YMvhKsJtZI9lheTLcEhT2U+Tb\n4uAi\r\n=k9Tw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyjubE70FiZaECmdhFwI/ckgPcfS2+V43N1NDwnj++6wIhAI9ecwK2maxS39WzofM0ePJcCPtKlN0o5VklCvjuzbgD"}]},"_npmUser":{"name":"teedeez","email":"tinkering.programmer@gmail.com"},"directories":{},"maintainers":[{"name":"teedeez","email":"tinkering.programmer@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tdz-anchored-floating-box_2.1.3_1636685128677_0.8336175800223584"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-27T18:46:06.788Z","1.0.0":"2021-08-27T18:46:07.021Z","modified":"2022-04-07T05:01:09.686Z","2.0.0":"2021-08-28T22:09:55.597Z","2.0.1":"2021-08-28T22:16:05.387Z","2.0.2":"2021-08-30T00:50:39.311Z","2.0.3":"2021-08-30T22:14:37.499Z","2.0.5":"2021-08-30T22:51:37.273Z","2.0.6":"2021-08-31T00:00:12.931Z","2.0.7":"2021-08-31T00:15:17.313Z","2.0.8":"2021-08-31T00:36:12.922Z","2.1.0":"2021-08-31T01:37:59.805Z","2.1.1":"2021-08-31T01:42:49.121Z","2.1.2":"2021-08-31T01:49:49.752Z","2.1.3":"2021-11-12T02:45:28.862Z"},"maintainers":[{"name":"teedeez","email":"tinkering.programmer@gmail.com"}],"description":"An Angular service that renders a template ref or a component anchored to some element.","homepage":"https://github.com/nhuyvan/tdz-anchored-floating-box#readme","repository":{"type":"git","url":"git+https://github.com/nhuyvan/tdz-anchored-floating-box.git"},"author":{"name":"Nhuy Van"},"bugs":{"url":"https://github.com/nhuyvan/tdz-anchored-floating-box/issues"},"readme":"# Installation\n```\nnpm i -S @teedeez/tdz-anchored-floating-box\n```\n\n# Available APIs\n\nThese are the symbols that are available from this package\n\n```typescript\n/**\n * The module class for this package\n */\nclass AnchoredFloatingBoxModule {\n}\n```\n\n<br/>\n\n```typescript\nclass AnchoredFloatingBoxService {\n\n    /**\n     * Open a new floating box with a configuration object specified by `configuration`. This service\n     * supports rendering `TemplateRef` as well as any `@Component()` class.\n     *\n     * @param configuration The configuration object for the anchored floating box\n     * @returns A ref object to the created anchored floating box {@see AnchoredFloatingBoxRef}\n     */\n    open(configuration: AnchoredFloatingBoxConfiguration): AnchoredFloatingBoxRef;\n\n    /**\n     * Set the default theme that will be used for all floating boxes created in the future\n     *\n     * @param theme The new theme to be used as the default {@see Theme}\n     */\n    setDefaultTheme(theme: Theme): void;\n}\n```\n\n<br/>\n\n```typescript\n/**\n * The configuration object for the current anchored floating box.\n * The type parameter `C` describes the type of the optional context\n * object passed to `TemplateRef<C>`.\n */\ninterface AnchoredFloatingBoxConfiguration<C = Record<string, unknown>> {\n\n    /**\n     * The content to show, it accepts `TemplateRef` as well as any `@Component()` class\n     */\n    content: TemplateRef<C> | Type<any>;\n\n    /**\n     * The element that the floating box will be anchored to\n     */\n    anchor: Element;\n\n    /**\n     * Optional class name to add to the anchored floating box's container\n     */\n    className?: string;\n\n    /**\n     * Optional context object that is referenced by the template ref\n     */\n    context?: C;\n\n    /**\n     * Optional theme for the floating box. Default is 'dark' {@see Theme}\n     */\n    theme?: Theme;\n\n}\n```\n\n<br/>\n\n```typescript\nconst enum Theme {\n    LIGHT = \"light\",\n    DARK = \"dark\"\n}\n```\n<br/>\n\n```typescript\n/**\n * A wrapper class around the AnchoredFloatingBoxComponent\n */\nclass AnchoredFloatingBoxRef {\n\n    /**\n     * Close this anchored floating box only\n     */\n    close(): void;\n\n    /**\n     * @returns An RxJS observable that emits after this anchored floating box is closed\n     */\n    afterClosed(): Observable<void>;\n\n    /**\n     * @returns An RxJS observable that emits after this anchored floating is opened\n     */\n    afterOpened(): Observable<void>;\n\n}\n```\n\n# Example Usage\n\n## Code example\n```typescript\n// Import the service into your class to start using it\nimport { AnchoredFloatingBoxService } from '@teedeez/tdz-anchored-floating-box'\n\n@Component({\n    selector: 'test-component',\n    template: `\n        <button\n                #button\n                type='button'\n                (click)='onOpen(template, button)'>\n                Click me!!!\n        </button>\n        <ng-template\n                #template\n                let-name <-- The context['$implicit'] from below\n                let-greeting='greeting'> <-- The context.greeting from below\n            {{greeting}} {{name}}\n        </ng-template>\n    `\n})\nexport class TestComponent {\n\n    constructor(private readonly _anchoredFloatingBoxService: AnchoredFloatingBoxService) {\n\n    }\n\n    onOpen(templateRef: TemplateRef<any>, anchor: HTMLButtonElement) {\n        this._anchoredFloatingBoxService.open({\n            content: templateRef,\n            anchor,\n            className: 'optional-class-name',\n            context: {\n                greeting: 'Hello',\n                '$implicit': 'Angular!!!'\n            }\n        });\n    }\n\n}\n```\n\n## Result\n![Example 1](docs/images/example-1.gif)\n\n<br/>\n\nIt will also reposition itself if it overflows the top or bottom edge of the viewport like so\n<br/>\n![Example 2](docs/images/example-2.gif)\n<br/>\n<br/>\n\n# Real world example\nBelow is a screenshot of a personal app of mine at [https://memecomposer.com](https://memecomposer.com) that uses this component. Clicking on the brush icon button popped open an anchored floating box, then clicking \"Text appearance\" button inside of it opened another anchored floating box that is independent of the previous one and any others.\n\n![Example 3](docs/images/example-3.png)","readmeFilename":"README.md","keywords":["Angular","Angular 2","Anchored box","popup","popup modal"]}