{"_id":"@ngneat/hot-toast","_rev":"77-3da84720b7ab32fc1ebd7d25f80b39c7","name":"@ngneat/hot-toast","dist-tags":{"development":"1.0.9-beta.1","release-4.x":"4.1.1","beta":"7.0.0-beta.1","latest":"7.0.0"},"versions":{"1.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"c2778bc5c394a9bb7f8bc5cc86170cf914a6cfe9","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.1.tgz","fileCount":60,"integrity":"sha512-8vMH29XffD3uz8dutCCQFXjvh4TIK3YQhNhehYXSb7ABKAbZXfLRKsAlaLcgXzJ3LaNBy2e+m/8kb14jMfWegA==","signatures":[{"sig":"MEUCIQC3yCNuxUHcFzsVONgSr4z9m6BOTZYrqk/EBRj2dtvMqgIgH2aMuE3ENFda90bT4TU7GGG40SZVteLJjoUYbu19qoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEnYICRA9TVsSAnZWagAAofAP/jGHN9Y7UwnfoyAfc6qn\nsgUGeZDNZAXXZpOp7Rocdn2Y8PSg0r/W6IRJ9LFl2Z1nikYcIqXbdoiZxnkF\nLdtop0+hlCYAXrPIeR2sFP6RUi3y+UjxlpXIprx1nFCx+IqFOg4l0RtLCPR4\nDZm3dOuZLWiV9zhLqHDR1BodgamJSUpRcap2S+6zjZyy1J6DxpcZDbsXCi4B\nmbBAjG0u8c2M4zvynhVAiwunZSttKv/q+n2fbCxFa0/6IcDCzxxzvyKbCDLS\nIhMQuigiG3IDc+bjeysxFBRkqUOQHKHSPJdwOdx9G1SHM6fc5o3iiSMCnYrc\n3Cc4WL9uhARC5MGw2RYis9dFw1i1EIguEw9inSPdBUPOqgUKMAUZPPfPn5G7\ni+8WQ7HAMMJN0zMdPe9I+VHnJJBGN5BuzrRtqRNy0bQAY4nKUyEXBahP6Qy2\nNar3LUMV71qo4L8grH/h/EZbWgS4Ly+z6gvqjSVvBp+SLZxtvKzw0V4qR+8s\nR0RNIz1wV5XwkU7u8zqZPbZGDDmZwB30c9iFsv9UvZnp35TtiTD1aDbrncBu\n+Z9YbzYKvxBxXr7c0YBls881QhkKDXwlTkcY4O5wY7AcmH93fVRtzoBHUOGE\n3SyLaVGK5DaLMrjmTWKbVeAlHBqVTC4f5z8ALHD29FnndpjzSpyU4MiXNbQV\n2mGb\r\n=XysC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.6"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.1_1611822599737_0.5667312013584949","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"b0f090f8f77125bba50bb9cf4481db8cc107ff89","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.2.tgz","fileCount":60,"integrity":"sha512-EDbvgm579ZsaR4fPrW1IJJnhkMQOBhs6VdRtluLkLIvQXZgx8TfLKP6JgACcBOg64Kjzv8Nyw2DK2m5sqVccpA==","signatures":[{"sig":"MEQCICWMkAizKgmFddsqZhiIJUxXxu+ls5O313zetpVyDkRUAiAmbedeQP5fcUIo+242iqCkg1A7RusvJ/fLdVbyr02bcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEoY9CRA9TVsSAnZWagAAyg0P/AsoExpaeHSr03SvJJGf\nPmrMs8Q7tVCVftODKVyG0Sr5YaKohGacRUibbKThFiFi/0QzKakjD0w5YuZM\nQJY+HmXwXup9rnU1Yezi9raeJq953/OctVJpaQd4m1JnqH6UdZWnczl76EtY\n60hCyY7hspPTvUEeYxrYyNCXD81J9EdOIAsl0EcVtDmLimEKd28RpMu9qlYA\nX+gPSzHDayYGIB+40rmJaGXoC7zSuOnvmlONpqT+VgNdMoeahAPW/xqHbgit\nfC7fR7Ud5CVXr5b2Cy2Ph3Iq90SOpwG80ndL6HCVx6XVL9Q64XFatjfvcpi1\nOuf12RR+AbtIWTt/ls7G6/WHjLJrIErV0oM3Tm7jkPhUUzmBRWt+WJL7m9VP\n7xGdrpI0yYnAHWCuo/OakYvWVFiq5fdxcpz6BsV4ZqLT5M7/ANKVvJ4geTRP\nN+/4PGfU32m7vVWRmcbaDjUCxYCHYvgAYHBG+lhHXm1QWur7lYo2G93ATIpR\nl6I8Y0wHy/a200Mth8cUeBfrddWDOv4oGy6D5ywTSPBAJ9uCGZfre6n1iG+d\noat7u5ezu+eNMZjlvo6tQLwhFWwg7kszwLUcGYAfed+CEQ+pdMwJsRH7ohrF\nV/PcgTUY7OV1JrNG/w5ZP8bCoztyPC8c8NCYlwwdBot2tf8a2nOfqMoBrZwh\nOgbP\r\n=cSq4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

ngneat hot toast

\n\n

\n \n

\n\n
\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![spectator](https://img.shields.io/badge/tested%20with-spectator-2196F3.svg?style=flat-square)]()\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API** - _Automatic loader from an observable_\n- ✋ **Pause on hover** - *No JavaScript, paused through CSS `animation-play-state`*\n- 🔁 **Events**\n- 🔒 **Persistent** - *Opens one toast at a time with unique id. Can be configured.*\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm or yarn**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n\n#or\n\nyarn add @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\n// ..\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n// ...\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\n\n// ...\n```\n\n## Basic Usage\n\n```typescript\n// ...\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n}\n\nshowToast() {\n this.toast.show('Hello World!')\n}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set *Available in global config?* from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
*Default: false* |\n| windowRef | `Window & typeof globalThis` | Sets the window, from which document will be fetched and hot-toasts will be added to there.
*Default: `window`* |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
*Default: `3000, error = 4000, loading = 30000`* | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
*Default: `true`* | Yes |\n| position | [`ToastPosition`](#toastposition) | The position to place the hot-toast.
*Default: `top-center`* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
*Default: `false`* | Yes |\n| role | [`ToastRole`](#toastrole) | Role of the live region.
*Default: `status`* | Yes |\n| ariaLive | [`ToastAriaLive`](#toastarialive) | aria-live value for the live region.
*Default: `polite`* | Yes |\n| theme | [`ToastTheme`](#toasttheme) | Visual appearance of hot-toast
*Default: `toast`* | Yes |\n| persist | [`{ToastPersistConfig}`](#toastpersistconfig) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](#content) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](#icontheme) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `any` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `any` | Extra styles to apply for close button | Yes |\n\n---\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.2_1611826748937_0.8492964511700296","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.3","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"7f7f927cbb8ade2a2847bc9914880a39fbc070d4","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.3.tgz","fileCount":60,"integrity":"sha512-OmUbrbw0ALy201w34gfA+hI29dY74C+TOE6FdkH+7Pef2Y+DlALy37xzwOdolVdwvNDc0Sfvr+cZKJPrPw844Q==","signatures":[{"sig":"MEUCIQDBaojVhtDcCWbUx0fNAhmopt33VJaz5XYobanCYnK+zwIgdKZUgLejCF0Mz8KAfekr5aQZQVfXOmj+uO2hpbxnam8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExf5CRA9TVsSAnZWagAAa+wP/39dsm37dahUQWnSI0x8\nXYaVJyPmTWS67P02Wo1HheY36ZNXedqtV03555q5JnrYflB0ibuc+GJP3qis\nntyJEOSHFKoXGDZrmsartMtVZ/Uff1xafk0BNSWii5/ZBzJHEn2WXQEenQKI\nGNNrcQAWsfuRNwSJaxhLK0m2Q3cLRhVgS8dwpUIub1rdT40iOKWXXRi5YArA\niKgOfnYQcLAd5k3vVJ8bp+RZnw5KKvgUV2ii3uncAf7x12BknDJHpnk4yrWq\nOKV6Lg87CLOG0eIeVSRJieA37s87GZqiemnO2UVfmdP+3fv5nZ+J3b0YPMfx\nZc1lO/MmogBYeF4yeZRIf4M0bo4kKFf8Tli/os2EFoi16M8k1zWyX+sRebr/\n54SKuIOZBq1gnqWd6PsXTUGSOp4I3XfwDhcrwtJp16pb81kmJiCuJSP/hOiN\np4+5tXBDC41wZB8RBAXnwPh9KFHvSVbcjcgi16+GIpkj4xkf7Z5bzD74KJy5\nYTYYlxSRd5AkJgk/anz03TYEWAIaQyPZ2tVEUJkIf8UbzqBjngMpvPNO1HMH\n14IV1jMBhMQt3s7IHkSf4QmC+Mzsmf68zHDpXd1pPdDtFcI5PRuwiGUh1tYn\nQgO9wIKxZaharM6k6OHH3eZWAbuOiFy6Fyj8mtt8+7oqvYINc2i2VFf4k+kV\ns8Qo\r\n=BL3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)]()\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/{overview,hot-toast}\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n apiToast() {\n // below would your API call\n const saveSettings = from(\n new Promise((res, rej) => {\n setTimeout(Math.random() > 0.5 ? res : rej, 1000);\n })\n );\n\n saveSettings.pipe(\n toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n theme: 'snackbar'\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.3_1611864056788_0.17586179522897294","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.4","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.4","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"3ddbb051e61e0208dee47ce8d1910fb3138628a4","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.4.tgz","fileCount":60,"integrity":"sha512-WaboDkjTrxxLlyY6rMfsjDvXoXsgkNeHM38BLUivPYQmVq0y8zhRDSBtUtlK0gdqWoGQZYg1xbchQBPxP0COZQ==","signatures":[{"sig":"MEUCIQCe2Fr+CugpIbiYOqyRY2T5Or+R6KeFtJmrOMQEyWxHgAIgFJlh3eXlrWhFxI5mInd0YP0mDmS3IvZ+nQxQW2pp5Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":476844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgE+w6CRA9TVsSAnZWagAAkssP/2RoF17aFmqUKuCOfPBA\nROx9rRINW7hJ+b8dj5ygLe52ea2RsdgvY8rCllFd/uXQ+SldZVb6J/nbLyz9\nFMDYpu5cr6bU0nWBockYmrAM0Chm/psF+QtKGLEmgHqzcL+fAuvdGBvhsf9i\nT9qiQZY5Bn4SY6W0SCXuwKt+PHEp+hCF0VOjod0TUoGuhlk+ItvM2U6cKkNf\nvKoWHnIRQOLHYpu7YQ6S6aYkxI/SckbM0f3ED2Ypx9luKBpiF7qXbCQGYhSY\nYUy1AoCxzi5yLP64Sxfd6cEbAGzNXLW2mQheCRzNXJ0QV8B6u1rQGbwZe+m6\nC84T43hfawyLLb7ez0MKsWXz6KHrnF9kJVs9L4ecRb93moMulofSCvFDmEKG\njQWUJbiy6YAC3XQnXroNI2u7EegVX+m4T5WeErWboTEmbMmo2qP67N1024BG\n7IFKnHnVykv5sv+1w7y2UrAyTUyWg/JwQ18Kl7eeHb802AVnBT+TumT7ws/c\nTKpaYSUobjUsft1hgs0JjDJYWc3XtukH2PEwVgCbM+SClIv56YeyX+BqVZBg\nsL2vPZ+Pcicgq2MOXD68X3v7aQfe93roSO99GfxmkmylFuchd98uNVoP6a6J\nFELrVOMlOZGYmki4W8GlUWZbKjp4ZIOekLMr9PDhDdtpyomf+ljEp/XiDbpd\nsPrO\r\n=gh+E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)]()\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n apiToast() {\n // below would your API call\n const saveSettings = from(\n new Promise((res, rej) => {\n setTimeout(Math.random() > 0.5 ? res : rej, 1000);\n })\n );\n\n saveSettings.pipe(\n toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n theme: 'snackbar'\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.4_1611918394438_0.9506338992007821","host":"s3://npm-registry-packages"}},"1.0.0-beta.5":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.5","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.5","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"9aa784ac2f2d88660b01714ae3b49b106c7615fa","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.5.tgz","fileCount":60,"integrity":"sha512-ziZ/oHoGGHH9ZcrV7PlAoe3KMkxC/R9mxAQxEx6zmpnmxRX4JAhDZOVMivbEUrbcSy7Fm7JKMvN1nIPml1Oedw==","signatures":[{"sig":"MEYCIQCJT9JwM75Uc6gY05JIEkuWmH1Xpz+D6pg3kJZfHbks6QIhAP8GJUd82Pv7fmnW/ORTXGZUBIGTXYOUgWDkVe2BHDSv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFTTACRA9TVsSAnZWagAACZYP/jpmOs+64uRoQvgHi9Gz\n9UQj3B2X8b1JuPJblwBuise+Ww7TEWhiN0fSTcmMe4joJUL4m2ptr3wdBGsT\n/vpNRwCoWHgq+Th1vUdISl6DpakRnMgTZjQrusE8m7EfAcEJJENB4RUKj4J0\nJqnJQAoml2iVxM7wlCDDvv87QNrVn96UWaFJufKQOKLMR5E1GfeevQ3/zuhf\nQyWS2KCn98YpRzNs+TYXCf3D5nNxufcpLzTzMQw3WpJLIPWuap20ZMoKUmZJ\nmI4HgdPTQWeGN0IFvDf9z42nlP4koisfqy/cCqCruF11LTP3urTZPSK6reso\n58Jgu7zJLcf7RMrJw40cEPKgkLXOnAC/C5mFWIrISzHq9nyC2KdQ27IC7xDl\nBA/xE6bpk9JJFPkXJwq1+bcMZTLFlwSUbBMi7TI5bU3KcbXancXmtV+A1wwn\nwOeQyg2ww5joXMLmVxQy6zFcY4yEOptvZXa3GYpCJnzWmdEJJKneIDLztsTI\nSWjmeBSkNha63zSuvoHvUi3AMAGWF/+MGPcC5YMTQmad22rGSAHmZuMkHBju\nomSziLPlBj/s/I8syLZCyzwX/7/SAFgF03rjOAiMAmMmv6Fwu1ljvKXUFkNd\n8rNTOgQAaYtDjkRvh79kKFoaJvkXIMfXFUB96bkHu9tR8QKbZLS/8vGZrIaR\nnVML\r\n=yOdC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)]()\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n apiToast() {\n // below would your API call\n const saveSettings = from(\n new Promise((res, rej) => {\n setTimeout(Math.random() > 0.5 ? res : rej, 1000);\n })\n );\n\n saveSettings.pipe(\n toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n theme: 'snackbar'\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.5_1612002495574_0.05771221904811785","host":"s3://npm-registry-packages"}},"1.0.0-beta.6":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.6","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.6","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"adddf5dd1f4f4adbcc10a6a8b0e7538e1b8eebf6","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.6.tgz","fileCount":60,"integrity":"sha512-W2SSD0i/EKwiiOvdqHs4TsWoi5whn+RP54vk3AbpK5axI26+0eqIAjNgtZ7Vk/lFqjT+aiwYFO7w6eobynsdZw==","signatures":[{"sig":"MEYCIQDucO/4a0h5Pp4dsceNkRYlT+sIio7tD82qDtLPPJ2P1gIhANqlnXSDpkuJamtf/uW1UHHmgKfDtmI3hfTyR/B+5ecz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFnpDCRA9TVsSAnZWagAAEe0QAKJ2hMesXFrxqg3H2m+1\nZEFmzJMfi+1HRuehge0blm+TstwG7clr+/782CWEpbnULkRcwJx/uoho41cr\nnURBgkggTlJlKFnedv6/xHqiSoFy8gtSZBLO0aSmliN3jbm6ss3tJa3TRZvv\ntdl/FirprcnaRGRLaT8E5oDMj9g87qpvpTCD4/p7lJtlOwnvvstOOy8SpcB/\n2PSCwUkRCec7WOJx8AZM2kSgD4Srk5suviE6KFg2faRDXyNMKZMhvRXQgrut\nwiub/A/M5O93VRcRu5GHYVseUTcZdeMh3nU/YfnwSq9ZFDd0vsbFOOeKa9iz\nGJ9X6mBHwanNEXtw69fvUQ7I/QD1WgGFX6YNJVkp+V0l+cNj0Ouk7nSxxdun\nFvYz/ILJWHEbaCs+i0tvxJoUdLraengUEwklFFgud9F1XI4BISMZUBNcuwxl\nHTFXe2KfH8Ehjt3k3c0N2dWIwiCI5FUdnZ9OxL2yYYxNUqL0yp/R9tYXwv2C\nmeWdlrco4oIoF926647/g/ITR/v7vls80d/06GCDlmhActRYhdH/USmDEd+k\njoROOf9UvcfGNFa4br9iO4kKu7XNun2wiSzOp9xBlNgIpF2ihi4ufRbWo8hJ\n5CjqHUbFDjNe2ODm/nM2MMUg1ZhsY6Y+w+29XoUFTOTE/gqXgHUJbcGMV2Mx\nN8sh\r\n=yS8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.6_1612085826686_0.48104566298037454","host":"s3://npm-registry-packages"}},"1.0.0-beta.7":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.7","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.7","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"d4b6617105507020aec0e4d2f35fb7755ca70348","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.7.tgz","fileCount":60,"integrity":"sha512-IjVBwtCYHoukea+jvZOtmx9INusDDQHQfrBQ950xxPMX0b2UFjfcsMpp29qnWVGyMIlG7sB4Ttr5LM4IuBVGfQ==","signatures":[{"sig":"MEUCIELmJpFYeGSEWXGUTqB/82+Vg1BVAN7cn1cLs4GYD7IPAiEAuuA2Py47HrqmH9oE7G00dgeif9fEexcuGdbqY99hlhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFv6KCRA9TVsSAnZWagAAcvAQAIKnk21jXn+AEAwRiCCO\nCIEbFMzUEqJ1sJwu/x4nQzp2Rqu+Js1fdDzDjsht+aBhse2sKEhTzi3+TYpJ\ncgdkm9Q9akEBlhwys+WmHbb63PLi26pOigpDHPlb8jL+FOguokTA3Fl4Csqy\nExuG2/BnwosEB/yGhi1MVfEsM0quXJ8MIsHu6fK1IiOgkDiI0xuX6BnKUrZS\nnQFG8gBU6R7KydrVg7IP3i+0sqGLob2MqDJwophYlsE7K5u7Zewn2wG3GdWy\n6xwXOUsuzAft6PILxM3kpyNzZuA/G/FHNpeGf9Yma34lUD4B3ybjJfpOfwW8\nFV3Vmp6ybtoR3Cr7xtkkkTBvvOfz0QwlxJ4d/bYiJPFs8Kv6mAW5XTFLmhO8\np5DeryfD55mhx1uEDdbhCkJKX4e1GR8M5eBxRGrMcmFO547VJdGc3DnYG0Uz\n2AzzZZKCdffL3nT+cKnYOjI+xkgPdOcSwgIbVCrtwuUflP+nK89+jBNIF4Wr\n6XwDW/WeVavG2baBQF7sqKwqlgLBuWfctG/yQBDIn1uTkeCIQ5ITOipE0nVJ\nEb0ebZWlllh4uVdu5KDuFcKtn5JVLeUmxb9wN/6PVdrKaWzIB4+f01l5KiIl\n17tybiiBPIyeZFRVKgfFNsoOd+Vc/TFD4kBCnBmNMgbUe9QjX0VRY+GCMzZ9\njzd/\r\n=QVzv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.7_1612119690332_0.1573371675663997","host":"s3://npm-registry-packages"}},"1.0.0-beta.8":{"name":"@ngneat/hot-toast","version":"1.0.0-beta.8","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0-beta.8","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"30c10cdc72764c4fd293e24e63e1a0c8cd9df13d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0-beta.8.tgz","fileCount":60,"integrity":"sha512-75I2lIadZzPtYmrJ9/jL/x69Dj/1qDcBK7gqfBb1R3Z9nvMD3YvlJPt9Qp7IDNUuVOj94YttJ28jWm2sip+j0w==","signatures":[{"sig":"MEYCIQCnultdhE3oEzDYVGYGECtL7OrAnYGfuJSjUujRRjXXbwIhAOIinLIRiyAA+xw7/ICZnVwglVvg4snvMAeaPsmiAM30","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFxCWCRA9TVsSAnZWagAAsnsP+wXSw+GVAkrngnlcz1sE\nsCpAL/xDmClGN52VVtKelcIc/+z1tPT7aeZ1L3GjEB4DMRaAh4TgG3cNfsl2\nOAU3mJJjYZO+mx9nnLLKmPQkG7WMbDOqj25CFvxb67ZcB0UsaqmCLLb7M2DD\negh7jVEpY6efg0uvNhXyA63S/Mz3ez7liQnPe/o98ZbvYO/uaA7AoSeMkieg\n8DdZqXdEffYhYkBOh2cOlo4/t1b1V4E9mdgHl2dEibRvF+Asqhd3sMOq0y+Y\njrwegi1rjHYRjs1hmyXqLPtjpf1Nv8fTkRPVY/rVSiGOkz1QL4J8fAGgFRas\nZ/Bl4DcRPAwYltMM7Mciq+01FmEr8u1qXSwY4pdbvbE4p6q/TWnhb1UE8/4+\nEUxVYJGXMCTLbI4yzeElVXoYjjzpacSok28ssZ7lKuHqCs8m1/eBL+kPsfrT\nR+bNSt6LqRgZLFRxc/nv2ev8UsA4OE9CoWZLUlHBSTBKw+qo4ce0UY76uBTj\n4i4yC1ow6RAOEFwfLVnHJH1i1LDvZF6BhqRDT9D9FVZO3cadGhYmzlizZX6C\n+oaKRjqMReTGOQ+Hzz510XfjclHbZ4wFOUiC0PrM7wpa56N+cI2vvpSQNEaI\nlmpTyAfct0QlYFllNF/KKHjYu8Kgt2kxZ6omnfCXglNg9nEHVfvfdYFe3eUV\nJ5AS\r\n=PBje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0-beta.8_1612124310517_0.3960448652766282","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@ngneat/hot-toast","version":"1.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1ebc4549d7b5afa7c14cc4ddfe1cb6e204fe8b4f","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.0.tgz","fileCount":60,"integrity":"sha512-zOFyuyPI82xxpLtlo8plQWEzMzTBatBeH56QqpXFWRDNkAzT5FZBfYn2+IWFTAQUFkIW5zAhEnO97gZABO6RAw==","signatures":[{"sig":"MEQCIDnDe8S8LUbqG1/Dp7tB0pi59vC25dx5U7gp4TsngqPmAiB9HKhW4HZUZvM0dYPQ/ey1HOPtUbkFzmm2JIESkL2KUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGB4wCRA9TVsSAnZWagAAECkP/Rx0ZBCZ8eY3ZGQCkzrb\n6P04ZcKakh6zmKkkqDIDFCwzXu4qs2cTtMXTvDpUxp8Zecy1VaMj891Bix8R\n99SLhmA6YIwMgxHaiI2nkXHd7inJNO5pYCGmfNvzOo1giwmzMg0Ks7fYGZ/S\nN0jpPzInR4nhD/HnhxchQviX69DL0WR9sHkX4EQKScLJKM51ZjRfx8QzRa8g\nRGQAVC7i2ln/X7KxJF6EDkd0HdKRNGJVv00xgDRz66HfB3owcQtY8klL6mGk\n0cfSlXZUy4KKp94puFBPOv3NyG41z6q7ROVzyr25sSyuVEXmWcB0K1N0LiW6\nldoJqJwFnnhkY0J2dXhPMnowIoi7OKE6exdll+ha284RYe3nj0Qjnwod7Ftg\noUx+is7GAyol5b1TTdZsdtK91bR0MoBcOXqYE0dqkiyDtxRUwINwO/pgvLG0\n2D/zIut1sK9O0Exvu574aO0RhGoZSKDuTZb9hJOv6cAu+IadBvNXYB8XguMt\n0NuaPDMIa5yerIagtpYz7e+gWSvVWtG96B3YqTtzFQlCGG2DqgPhLJBA3Nq/\nTg87KWOPUfCpXY9fqXR+KEQUzHVIVBSkqn+017jPdIDap7BOTQ08U7yx0HYn\niRxwmiroNSeAp00kCej7FYoTNIIomI8/DA0FS/Q8boER1o8GCMfFOXoRsnzF\nlTpR\r\n=UiZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.0_1612193328267_0.5668065958179924","host":"s3://npm-registry-packages"}},"1.0.1-beta.1":{"name":"@ngneat/hot-toast","version":"1.0.1-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.1-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"7cceeea7a0579da4ec2b98cac8a61522c3464deb","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.1-beta.1.tgz","fileCount":60,"integrity":"sha512-1hZO8SrAzFkzBnwwgMUd7y10OGR+niWkeSDgbub7PNLxzSRtkNLBkO6qIS7QrWI9pIADD2P8nbsDB2GU413lVg==","signatures":[{"sig":"MEYCIQCxO0fJtWKziLcs+GYDudehcECD4o8FKDDnCHs7WeHaVwIhAIYrtbgfmBZZBpaMYfJB7IDI3vIz5ihmgmH4FHLAYTnh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGP5dCRA9TVsSAnZWagAA3BgQAJAs39AutZub5ATNsgG2\nGWbkzqgpX+40NX7JtOoHAXKM1jfShCti0MwgXQlpZOTuHDPwszXwSinY8tN9\nDnuVbmoSy+rAW+FWdmli8SI+BpOBjpvAUlKIHm0iiobW72O0fPAkhoutfpdP\nxXpU+5LvDj43yRdx65YjipAk+lXTJDU4Ct6g//AO0pBvK7/C7rAm1pYYKW6Q\nRq1bell2MvzKZ3Dy4yWp3NdjqraGqiZo/m5scy3VGlio7oPCNDPCEVIXtZ4o\nfBz+Bps1mXsY5A3lccThaFispNk4x7C8sUCF0f4f+HnN1iL+Ah4f52QqcZyU\nGVOXY0aHKFd9pThj06FxiodmNXuAhPYtNlHKbLQalwTrt8vP+Lavud4Juc78\n1OMyBVxc4PxJ0emn86Ktwy0GTvSY7b+9J+NrEQw31MM84SKVC8/JaetLO5Tp\n9Lf9gBS89BG7yoffFac0GImBP6uvbFx4oSy9HqPG+UQddh93G/eKAU9ZNHK9\nD7Ef0ChrELP26MYCEM0mhfrSkpaMjWGy26KLf+9EvFN1nkaBcCkB4iUwLVKW\nke7wz9pn/MzkezDJxKLXHHfCtDVIdq2fZgWwdgqlStnOQrP4uhLh2Zddj4yz\n58+J93uLrdr3O+qKqGYN+x4tNfJXBM+x3dXGTtPU0WQv18Z8W7WNtmdhI8sc\neRip\r\n=/7Se\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.1-beta.1_1612250716609_0.9115553400369114","host":"s3://npm-registry-packages"}},"1.0.1-beta.2":{"name":"@ngneat/hot-toast","version":"1.0.1-beta.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.1-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"0a786efa0f305958d8c3b1241113bdd4ddb72223","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.1-beta.2.tgz","fileCount":60,"integrity":"sha512-ZixcuvlMCyN86XLIeSfwXIfjMgq/Onv4CJbOPrXnDxEEpthkarT77n2DoF3jKf7AACgr44cEsVf8owkVs8tV6Q==","signatures":[{"sig":"MEYCIQD4tpKLANlWY6wfdEuTVQ31cgA1fbjzTDTbZt3XunohhQIhAOSzsdIhPvoHFlOGdMRskyzqVPAJoJQXt1L/jkx6I/W1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGQgbCRA9TVsSAnZWagAANB8QAJkUSIXDL+3EO1tl0jpb\nDyX61NA4Mc+n/oDwfyJq2yh2AV3MRhgh1WtxqE6b0gr/ZlicD9OkdmyG+aVy\n65JrQ5PVVxJ2VvfQK+JE8kHiGk9E5vOJLOwQWuMrfly9SN9FLL13bw0QxKlB\n44UYe8ysacWlEAjcGUcphCIw/VMiJg7Q1V84SWkQZjCnbcLLrs9swccPFbrz\nXsgy57ZA5YYl/SrWJesrRGaaOJ44iJ4tEdXpQWw9NtH4fLTJce4U5zaTX7/q\nRmVas+BiSrr0Ohwhy139yZNtBRd7cut/xAPStaFGfdu0Nfk8ADwP6gPMe39M\nhbletC9tDLmvg3zYhwYWp6iqIc7ygrQGlMOGt/xD7kXv3e7GkUzRCLLausnH\nrHv6Zw03rzyHIbc8P5LOFVcvw+e6AaR9bKoFP+QUnZcA7VYFMfyTHY7BAzM5\nQTNSVIpmx775iu+va76TN053i/kvyHmYsal5F7gFznDJTAwmdwC0ehg8CeYN\nsOs+hOCH9r/7fO/X5DlZ1Cw0bxcAos54UiE03ubOfFCJwPEJyGRz+DcMoDnw\noR0bzgahli+W4VxbWa/wWYiQVr5QtgAXmWbe3q4x2AarHh/tS697Ac4GhZF4\nowsgrWxZTcwwtWUPFkgqPzlw2M+fvtUvfa6ydJJ+YgCpvuhE1/+yZ3CbX8Ww\njqpm\r\n=0Pya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.1-beta.2_1612253211506_0.734755523435658","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@ngneat/hot-toast","version":"1.0.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1844f1afbde618cd249365e8d0d85f79c53b6732","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.1.tgz","fileCount":60,"integrity":"sha512-oNfWRiUWmwpmrYjrAqtUIlGZjCJ8D0pncq5j30H4KFepjIr6OIXv4BWdJ+M5Vhw/lD9AweTNaOmHBc8S5dwqvA==","signatures":[{"sig":"MEYCIQDGCBP2h3mxC3mh9g0ukOkXh9v2vVxdcMZwDcSm+pPT8wIhANlnFGlkfcEj7bo2EfDjHt9cFEK6qeZ2XDpTgk8CBoEo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGQ87CRA9TVsSAnZWagAAR3sP/2iXl/bRvPypEJ9SlENQ\nNXQbmXFaC4VWsR3G4W9+kL2Ne4kh8OLXBfQf5fUQKtVU2It9Zzz1PQju7mwx\nVHaHWDH/z01LGUx2uwCJmEwqL3Fm5TciRdRIV69feP6pK+LsOOk7UgMO/JhZ\nxy9FSyKfn0AbxYXzm5evqs2xyU4cjK5O1BaFCPyRI0h8wNVnbLuHeAvsENdh\np8wWKaB/Cqdl66DQcidLC7QyIzJAR/Qfsi9aHeDFAKgGi1O2eJuBMJIs3oSL\nOYAZkJEqxuSpw+61tdaEhTMm3Km9W7SXkz+Xe0ZjCF589y3A4ABri9JNefhJ\nRbaEmm3lhGt3rwRuwtNMyH/kxSj0iEOgbxPY5hEVBisYaBu9E/mRs+Ikn3IT\nBeh4z4gOuCM8Y88JGIEEJrsryWhBsi+9k8IEI+nsO4vwGdqSdsMh571r881H\nizfTOtOWd+ZiLaP7l5wwIJfR23TQZfWC+CD9OqmB5HQYE9mPoxBOdnNvS2e1\nsBh3sDA18ouhKxthiG4VQ5Q1UIYLSbEU5jHRXa3gaeIe6FaaL+yzAP+0oopV\nhfIJpM9A3KMW13sBATUymtNCaTdLguZNJCoBazwwlac/hKrgTR+oTJ58RCu3\nATq7/JzgsQ9lTXJtNTact4GbC5mGMitwHT/AzRUzFHNFA0MeqYVT2FrvzgJY\nFeuE\r\n=afLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.1_1612255035450_0.6107344084745756","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@ngneat/hot-toast","version":"1.0.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"0654e3a8c4326b2d0d22c78a649937c210e9a2f6","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.2.tgz","fileCount":60,"integrity":"sha512-2+u9ZwwWm0GCwdwKQXO0+Vao/jows9V2mxZOSVSG/b6QwCzUU98/8F+P2n9fAGrfLYLe9pyv3jW6j0QgDjUrpA==","signatures":[{"sig":"MEUCIDnwqJLrAONzqqzTZhB2NMi+gC4hLrYdlPfPWvHVm2QzAiEAy/a4SVoXHpDpn6us3IJCr9rVwBXhFVhD6sJPA5RwCqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGkQHCRA9TVsSAnZWagAAVL8QAJergTE4QYHIPyQk/IuC\nNrnHhQy8O6fxgOBGz2ouipwD/5dDKnCFc2GaVFhWNMCZCQU1ZPoE91Jv1x++\nyJKCWMm6tfBaVhvHgMRiIb8n8udaTDC+GPHM03rcDh8TwB/uPtsly73YhvLa\nIE+2gqS9hm1aZh1V6Q0HbgbsjxVk9w68ZZ2k627MpWPdXs+j/M5z2Y8q6Aol\nAicGU1tZZeIf1I6bg17MxR6Y1R4rDi3pL2f1cRvs5wuOTg5b9GAHR7Mih5+S\nFNdiVvdITtZ8G1r8zFTf2WpWmzn5nwn4vAZb6ynlIECxNEMegdvvbAZI6juV\n6H2d0FEo22yK54G2RJxawQ+o4w18W2+MDzVZwdFHWKOle6IriqPr6H2HmSAy\nbtfcKFSHEE44xn1AKT7G7VxUbWYvKpCDXBrRmTswGCAyuRjejiFfc/nW+0kq\nksRdtuUL2GxEucjOHriE9NEK0QrF3WXcSDiI/4IKHnMxAwXl/UTbSpiOCQ3j\nYDfdu2b4/fPD1YgVwgMgjrGOlBrbx9cVl74GwPEqRXpR2kTmOSQ0kuX1Ht2L\nLEoec23UwN4DwHjdnKOFOqB/TsDvPCfcvkLbf6Lw2/KX/zTbb4xDISSMZb8g\nTqO24lNN+21SahhQ7KVNyuDMFHclitQ1RsqqLLlGbixqgZ+7OiZrR1qlHr8E\nCLny\r\n=xzmk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.2_1612334086729_0.03998673191445401","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@ngneat/hot-toast","version":"1.0.3","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"bc41ae689be0128490c6882bdd0ea81c51276735","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.3.tgz","fileCount":60,"integrity":"sha512-rj+siV7W5zkg0zVW3S9aDe+Y9RpB4KPit5VCBQfTlEl4fL3iRoC6AEIWQHVz/Ka0TPAQTJqHANIBm2x7rwlHyw==","signatures":[{"sig":"MEYCIQChZzdXPQzgZCkNv0OckCJTa6vVhrlvO6uorGTVvgtiwQIhAMzIysDzfeqE5M9+s042SlkVGKvnSrCmzM8eeOoYhjj4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGmJkCRA9TVsSAnZWagAAqqMP/0lfTtDCwHGmyxHpRR++\nP1altl1i3T7wa0++QkyofplB+wAN1xAQgmBNW9HrwzmupUlelM2bTGe5kqe6\nXWLRuFbFqLRkpghn/SARKW2Uplu9Y2SaW6wrnpZfsdRL3IPy3+4hUhqSC55x\np2Sw8HvbdtibYOrFpDYaxU5QRXUXEo3zn58vFpxQmnkOeibRld2XYvJeGclP\nmFQlUK1O0F6JV43CxZfDuidrh5glsA/C+nWaJcbFY8nRMdLNeiBSdoE8a4Pi\nTHE1RtHavqC91wqdw+wHzGRWUpzdcYh5YnbTx05m3IvzAAT8UcesOG/3AjII\nSTRTP1z9Jf6rPOrl3O8GClVbBtbdLhvPfMUlYEiAnXpky6qCFGsyFug1CjX/\nzZrLNhqa+a0cqdiRm8SCnTWEuXILuayDRPRDtA9WqSgUpXgXvXvv2HYmQVuh\nuNh03EQVYwfnM3sUwxdwIsVFR8wZQLhEQ+Vt8a9eqrDT+lsbemw7JuwikgGn\n/Iq8MV0Miym21oVel/hbgWCcgAbHayT40qazYOA+EufGU3RSW2WVGV0DWBJf\n2Ei/xWd9WLuukx32zpNAu/L8b3NGJNNyyHiOoKJ3qU/6H+AbcQS9xS+VevH4\n8ITPRCU3pY7gN3lXP2Mo6k3ngr2V5QXcrx2ATlTD79JIS/Nu4737+NOgeewi\nOw3v\r\n=V4Yb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^11.0.5","@angular/common":"^11.0.5","@ngneat/overview":"^1.0.0-beta.7"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.3_1612341859578_0.2759241790367972","host":"s3://npm-registry-packages"}},"1.0.4-beta.1":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"d153d88c57c5f66cac03e659c86c075415f6da8d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.1.tgz","fileCount":60,"integrity":"sha512-XcybX5RUEGhLziCDWlCnfVLq6R10XR2xkb3fgr26SBx5MEnjFTqDyZwmx495MndbSh2uR6X/23Af2MPBcgVb2w==","signatures":[{"sig":"MEUCIEN22f/Bw7L4WI2NgM9mRUT6SoFJmeICN903qQakpoqcAiEA3uDx50CE/sSoYsxRBdl3MTkylaEdGFqfrkJnR7PFQwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHOWiCRA9TVsSAnZWagAAwEcP/1Ua25+JbTZ4jhUHn4PM\nWmeqjc9QkSsZvWuEslGmSy92SGSkjqFUMy+cvqthcaEasqnzwiT/RiOr9W62\nkHRDncrkfZJdNwJjVPZ/KwMfOnYmaOOMJqUbaNvF1S4I1yVhTkV6+YOvwYsQ\nZaPl0Puvh2I5W6ecrzSmjZhBHrVg/xIW0DAFJxKRlEEaOzA/oin0Q3zFKw9h\nWzti//gqe3m49oPPjhmPbNspJgeITvoDJdAIjKmd3VxmmY5rVh34/EliAFxS\neZ2dSzNB3CmIGMM8Gr2qAFxKFjVv9BaGBg63EYKLsEmytuqYfydZ3sj5hUd/\n9F0Ph4nouJi9bpm46xqwI185pTElNdN2xWSUEP4wwwCkg1P/ZzNjF3wZVt64\nmJGRsZ7yzntDQc1nUJ5Z2VR2TAcGbXANMXIuM7fVOFVJONzTmRlg3CI6GKZ0\nxcA98Cvx3MfY/3Cdg2cAwdgS670OXga7kGGzF13LcGUUqMmsSVGzPjsMgppo\n0RkyEGVTHBYb2GoS6DOML7QDP2aQrKQ7tldoozHqswUxmACUQ0i+MnhcxxCL\nL6GgRizjszgJ842qHa0F4x8ObAYOVsaaOhQ8YykrSJFrWj2d7RSKL1RL72yZ\nBQWWe3VzFQJvnQr5TsESsloI6NRBHzfj0RBSNx6wH1zF0xe6q2pja0s57Rxh\nvZQg\r\n=giNb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.1_1612506529498_0.28267751371048266","host":"s3://npm-registry-packages"}},"1.0.4-beta.2":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"035d72c73f3d804899bda024ad87e1b7e5471734","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.2.tgz","fileCount":60,"integrity":"sha512-seHJa6es/WS5W+pyV6Kz/5e7JOHgDLjs2UgAiVM15lhbRm/iOYG8EHsCyDPeCo9/8Ub6k3rEE4GNL7dYohH9bQ==","signatures":[{"sig":"MEUCIAJsZFKs1j+DrqFzrU/J+W3fEhxmCNpyMCOg86o5csV8AiEA/s4n5U7Qe+PU5Tl9o7zyZfM3ko+7c4MEujGCLs3eeKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHPYECRA9TVsSAnZWagAAVg8P/jUEvMmBGM9HkVPpLnFi\n7dbKRI357D0l+62pLkAoJS4lRdsY1/OjpP4lNiLOmO7o2c28wmTVls7/8Z3d\n7oseVBh2pdQl1T1RYSsgDonY+YZS2dqRdo/uCLGVbWwoBVaS8ssCVkVM/Zs/\n3p1SqFxeAHB3ZsOh0G9p/uU4VQh59qvHipOnTGr6bhtaZR3P0cac/RZTp//P\ntGwVi3TVU+NjcTBETFFl1mcKuM5SCPmpwwpmy2KeH8xsmRLMlnszqEYiq+9L\nbvaM+jqbGhylc/oNt3D1GeaPGVUHmUm4w15LO6RIbkPBMrNYfe9WOUHtn3Co\n/lEo2PtVvOvLwpzr6FejRw/3rRKxFmOkdQUHSseltwr4txwtQ5se7sm4OoaV\n8mi+G92DzDth1mT/G86hP+0QaN3a77Fe4ENXPpn0xPo328y2MpWfoLpYgI2l\nD0tQYLbZnYi2ZIbOevUXL6NvCpDUg1BuTTlSTFjPqr2J4R/FIXcdOZJQTw/2\nJCpf5Dr/Rw8YNnqPXVBNQLt6F1P+O+/ZOyqKnEzidcDOoUwY95t2+JXVcm9Z\n8mbeosi2CGtUFcK8QPmkk/cmTlnxuPogud3EVty+PLqf/oJmPEfIQYQonl3R\nHWy/zY+bwuyyRZEl+OAD8duyPGP/1jZSt64LPJmD2ihxqGXPCObKy+zocw+E\ng9jT\r\n=tw+v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.2_1612510724341_0.694374632009007","host":"s3://npm-registry-packages"}},"1.0.4-beta.3":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.3","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"5ed08f2d3bd08e26757c7ef75888a132379f1abd","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.3.tgz","fileCount":60,"integrity":"sha512-x8RM8DdxCkH0oRrLcHKuYznDJjgS5EY5uX3KQhe5SYPtUXF4QQTV/QCr1gf2AqHcPjm/tgC1YZg0WXLhbCRidg==","signatures":[{"sig":"MEYCIQCjf/RWbbUihHdfr6BW4JpKcVAiygVEkgzphz1FcCTO7gIhAKC0Rn0s2fqnMfikk4YjvV51LGEUdIBzxPsXl00Zifee","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHPqrCRA9TVsSAnZWagAAb8kP+gN/K73wZUTKcu9deEIW\npLopbjOyVVPDe87cPp7q7x5dYvcfWYCTUEoDxUge356+nBVfeTv7/Cr4l6b/\n3KBIUzr87FYCmXQuh5iZRCAK+1DmVNA0XmF/BUfQUW9YXmgqb7toLu5PdX+O\n4+TzXiCkhF3wfdUUMD0q3yEGt+mBQqXvMr4bc/bGNBruHhRkWTTVK0ncJ6Ir\nvrV/wEX4ijbyMOVfNeq/rtrFyEuxd17GcRLAaBa/mi+YBAcH3Fh3BWD2nYy2\nsgxoaDcKqfVxa0eeYd9gJcUw/9A5Km88iKEJHPY2oWtnljb2kdviKWrNkVca\nBwzOsBCLkzj24YpZT7Qu0fcLnfoQljH3JcbhorCbnuhbH5Z15O6vlfJJCyGI\n05Rf2xpaTa3uiGeMTJ29Y1Pu8O43KZfb55FbskBk8OYRwn2ZbT+mqICInDY5\njbk+/ADmAb2XhRMVcI1QAP23WMkX91vWaAENAQ95NIBPvSwsyamy2uyPLl96\nEgWAAcHB7uLFBcCDI3+X7K2Pm8NUgPWMI4rGHcO7YLBuVoK2JMHK5hzq/MyS\nNeZyk5Fuiknd12WqhEhSmpg/NRS5Akgm/K7DIWcjbaMVE1u7D4p7DPizVMUF\nBKIcKk5a0G3BeonpzGrgQaxtu6tzJantZpjMZytRSjWTmdDtqDrb2L9l16g/\nj8+o\r\n=zTpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.3_1612511914870_0.7071900873654304","host":"s3://npm-registry-packages"}},"1.0.4-beta.4":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.4","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.4","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"5ad9c170f4b22a9b2cb2cc91db73f77e734d5ac7","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.4.tgz","fileCount":60,"integrity":"sha512-eY18TxDytP4FhKuGkjpBi65jIj6wu0Sy874Xb7ljTgFflZyCpqXuvZqm3PFlLiB+NncUWSHvWcrOJJOdcG0vig==","signatures":[{"sig":"MEQCIGXKcVkUP4XDLmgrC0Mk5ksjDQpYBZJr6fK5iUi0/3rdAiADnwKYRpbxkuxrOOkWKjQKA6laIP9+ovp6QKFgJeaEjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHQj8CRA9TVsSAnZWagAASJoP/1u5l+AtXLGCCzDA6LVC\nHRLlbFR2Vt6p4nkK8omVwNmi97D70gBX8m1Ls7yHR5bOWy3uMkozvPKFtvAC\n8ZzT5fbKLI6HtdrH7uimrXNPfZ7OtyDdQBEfOun1uQiHSeNxBZkYH/2jmx4u\nh/kM+t5YD7yKbTIsI395P0Yv/yURZZySZQXmiMMNEV/E0TNmOWQVYiI/Cbzl\neO8xMos4zVUQ18wphB1VnG9maAOk5rkQyHM2uL3wU6DT4eZTnxtRESqnN+i4\nds5kV1KXgoUsKkX6fFJawcFzpzkDZLnIUTJSi+rxfb+EtrDG08j4CNKqeXFo\nxzlmIQLxA0icIP5HjbWJdXQDtnYnKKLn8448Mcvbkwlq+Y3rAc7qsBDj4dx5\nnlph8kQAM80dMrpBVk5q5OEWxst+M0jmXylSued2q1TixL+0WlJYETDegsc6\nLxXQx1H0+iwe1lkCu18C+4/gPiL8KWVcBI7Tobc51MhusPliuJZGjyXsgaB/\nCsbB137zc746wsF7vqXvfBD85mUNsypJv8cQNabCXS3cKZiv4eFEplX1A4Mt\nV3Xq77RPqLzeGYmyCTJSZ8fHkpb8uAojprzj2pHHrjo5VXKiZzAND+ZiYvS5\nruCiTry/7l0mWBAAtl3jeFFTvKJBzpr9M1yy4/stJm2aM5/F+CaZx+cpD3No\n9UTJ\r\n=4p+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.4_1612515579772_0.1114240217376381","host":"s3://npm-registry-packages"}},"1.0.4-beta.5":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.5","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.5","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"5780a8a165e53b35f7bc54b1b8cb75ff0b72983c","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.5.tgz","fileCount":60,"integrity":"sha512-4BfZsb2Qa9rGAFX/2RhDCppEylONxA++0fcGFoBsBVTG1AhyN9PVQGZIVti5Y7EUcdwKul4mfcEWzg137EiWHg==","signatures":[{"sig":"MEUCIQDgcjqBVnpduZU2muMnGQkx1EihhTAaUK7Na9dAAgg/sQIgTzXiji+BvlpqbP63bFH69kIqzHY9MICCCpcorkiZcvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHRYqCRA9TVsSAnZWagAAmGoP/jLW012fcSBPtD+jk0Qa\nFtAm8Eh81WL9BkDmmqZ/Mws10VXSSmrYv/UodQ956EBcNidIoN6HjwG8UuVE\npRVABVGMEDw/drLFTNPKhWkyKTtH/1RWiC1WIXWgb4cAVrQfenu2Ix7AL9X5\n3K/ATh1dNgjHaAITWTiejDg0+Wn2kI9UHliyh+7FI+Wbz/uqwK0ED0/R1Zec\ncKAxju4ltZTQ5E6lJ7qiIABUaXZobR7YnuuIhAYUoa0S8dspq4vC111iHJpC\nKEdoR/6j4AkMgShDSWQuPTr6vdJBki25GlpXZR3N7Ph1GuuLnjsye26sxvT6\nf/kgLpdcsAJvXgyOyYYoPTNCp+tkrm5AEKxWmf6XvC08k1NI8nYuhiKQgijF\nJ+qWrxl1QYp/VJKwkb5j6PyKagt1S4iDjdt5x4I+5inY5fIlSlI9HdrnlObJ\nMUHX/frWOa/LsZfbg/iACuxAe7pSPunpCgsCqWwRo6wfL6MmQpEpmxiK1YOO\n6iQsN6APTkvCVjRSFpffxOWP0lyCWFIh+GrIN4Hz6cQgUy+4XhSspDr8k2jk\nnhpApZNIcJAUHF6igUnBZGxWYH/kL/29YTqEDjzbxA8h9nbEpTW6JZYUBxvy\ntkB42REGqICmT6vX+DYV9jS55LMt70JLyl/eCfC9xvQX1E3jWTHDj8gukoSz\n1y9f\r\n=+psK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.5_1612518954237_0.6574942043214098","host":"s3://npm-registry-packages"}},"1.0.4-beta.6":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.6","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.6","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"7446778463b4146c378a28060a9f648939d1c3ae","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.6.tgz","fileCount":60,"integrity":"sha512-iwpZYRQca85E8e8tPjvbvJ/LNGpNWzK5pgTckfEjo6Al78ugOpKTm5q+NCseR0gpp6h6S5N79ztCqzreDECcXg==","signatures":[{"sig":"MEUCIQDlO1iZ1os3Uyqeo2UOu6Ti4l3rElRaSscBsuPIcdPiRAIgQZDxdde95QZ53bWxuKpsDAZ0PK91b6fCoLwJrWHHAwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHSB1CRA9TVsSAnZWagAA5dwP/2voq0TMf/nTpUFU5K+l\nKuqGKvf5lSSH0pbh77XOmN/tAPLCToPIg1S6R4rmEacvXBFGsy7THJ/K/Qg4\nGupuyth7J62eAoq77snlpPzhLaHEUhJ5+1ynqnVXZ3RUJx94s/MnsVFOhIf6\nyf2IK4R2fjvNyOfOy2g4qptFqg7rJHhGj9Mhg+Xmep8XUwoySJBLGIeUrH61\ncs220aEPHDyZOO+FL+4tinuqLoiC9pUJmKkHIrxlKBGYEUJ/I+M7y7iMHW7J\nzHU7c+Re0WUzBcZS5xqHHjANJipgzOy9OcqxuePqu0vWg5PiACD1C4dmytI0\nnsvZd1b281WosGCnz49XhAnCvZxRq/V4+LDbfUL010VaCzcgC8ShpGbrFYlE\n6dHvQUtbReCcAILoOBWdZN3QqVCJ7uNDEM7/fO/J5C4JOAqX+4Zqo1sqU25F\n9xIJi5kfX7ngCFDkXmE0e9okJrAjZBnkLn+NNIft+VFxxZPXSOceba5l4hrb\nGVcxsn+h9JFy6msffojEofXv49hocyZT9Ng9HxymhflTLOQBrzu/KRa8nkaJ\nnWcgMF+S250sFyTz+/yOY2uWNHFWw0HxIiC/BunXXefjtd6eRyHwN/Ap6wDA\nr3Vwe1VBc6dFSILPD/zjIFHUt9wGRobOdBm8wlxL0ihiqYRTNaQ2A5UTEY3O\nbtC+\r\n=28Qb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.6_1612521589271_0.6093900414363782","host":"s3://npm-registry-packages"}},"1.0.4-beta.7":{"name":"@ngneat/hot-toast","version":"1.0.4-beta.7","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4-beta.7","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"a6f0b1a8d44e9eabef5c5b8259f6c70c78fd7fcb","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4-beta.7.tgz","fileCount":60,"integrity":"sha512-Eet9UU35SzA//lj+gCTEA0J4jdle+TZfK3Pjdfz+HklVjXwyommfraM0nY8ZwJP9qJJq90SefzrmAWJp0CrtZA==","signatures":[{"sig":"MEUCIQDvgyr4aeLQICFEy3fMpMua1aZJkCvndAX+fkJIgPcwZAIgFWyjnNXXQfMBOT3GA+tfsS5bHtpvX0ABxxDxd7jJhCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHSUfCRA9TVsSAnZWagAAVlkP/iVIblJOnucrYhGggFbq\nc+GgQN04KcwUw0MJJm/o1X0oqgQvcthWBYLEfxAj9zj0GvNfM2fZh94HJCyb\nzuqvEBFYIEomGsX+cTymPEs3MWnNhCEd3njLfLk8wR6Sj07jApy+GmgH+LRW\ndgL7qXT94a6FxO5oyKP+Zuwy1srcI7KeyrHZ8zkguyzJuz7FCeuDM9JNXpeM\nfhllx/At/cOJ/NWaBYNotr7Sztepl/spv36bZehhfEvoKF0fcBGS/R8aTpsV\nrPNZbxTGSSFYRq64JXw0stcrmWTfQZPNmXm58CWMNcDJ2zcwCpQFEhVpm2sw\n7Y56S4z/qs3Gcho8kDLfPDiht/xPfKTYNvfxYx65nObOje0cK11bnptsdeEI\n7nJNW4tmFBz8qB0uqkxV+DPXK/jCEl6RVO2yPFEBFlhD2Yek2ry+P1ls9h78\nISWoPT2Rb/4qschFU54JgGm7OSeYDONMJg10SUYALY6kZSTPE/JsQgj/mgTa\n7j1PfCmedy3NiB4tr0umhza9EUpd0/WdeWNGYWvhVuxiJwT7LZjuSUwr2pIr\nFAqNdAkSIwF9zGXroMnnvzyZEV7QPpzdb9FXQE2HH6yGNKouXQnY2NGxKnES\n6Yt885U3oxSCx2n45RTL3UsREQ2HlKGpbBvAWXn+RPmomQkepncn6XWJllqC\nmH6a\r\n=kCPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4-beta.7_1612522783040_0.9455511771194074","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@ngneat/hot-toast","version":"1.0.4","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.4","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"0f12fb9fb4ecd6adc3afac240a242e73725db7b9","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.4.tgz","fileCount":60,"integrity":"sha512-fY9bCkDmBXBv7swlmgI3mnPgQkahGxG+nfUqhX2FAtGa8GZD4MJeP41U+I/Y7oW56y6feqe51BQBH5oUb+LQMw==","signatures":[{"sig":"MEUCIH2SSCblKmKHCazW1v3GeC1qIlD2qj8DEBeDcx/kQWoyAiEAssNjFlII4nNnad1bGlhjaxrSxqlTzWiQcQODnDJst8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHSW9CRA9TVsSAnZWagAATHsP/igBiwoE9PhJv2ASO4VU\n2rIRH/sJkcRP6A+JsmwehXr0hA9F9RHIrt6nCa1WeKtltdJxkIurOFeE/sNx\nHOQou+UyGbVtrnK4+9f32Mwew+4J42l6rCysPzaPM0QfV389jiE5BZ4Jh25L\nBOsEi4jVlQdbpx0jR+xQI4AiTXqb9veZ1wgucjSqywLIHUIq85PYkkicAJeZ\n+p9USNhcaPJtGjkBjIZs+2fRwvkCs83oAW8G+3CzgQS58QmKzMd17iS8Xc/1\n9Fb4TWj90OugB6Gxun69rRFSIowS3Ve3nZRlGtkaifOY7pOiGnMopUrJPowE\n0dBB3RjTJMNg6fLtU2hr6Q9rM02LyWh0TnrrBEnISTcDIjYIcB9/YzInNFSz\neuL5wjVIzxnP8UKZrHwsJPqGaNvwTK3DwgcRvXF+0oXggCfaRkkFFu612JPX\n87snDmzGdoSz448N4SFSBFaTvVkq+/ISWGlOayAmRMHD0VG6NJ6xqV9Jc1rL\nwyNhfdH80/bApYh8ydtfA306NUWWn/xCuYIi8hebJz39qL97MkMrPmvWci6b\n/TZN1I0URt3Q00Vhk/d25m6aEcI/d4SfJpy1+IpIhHtAX8Tdf7EPpH7YqTMN\nrFCUJjwuY9XZnhZ0a6l+d27xScD0kWFjEIfdflphJO/9N7QjrZlZ3Zb2gh5r\nezYq\r\n=oJCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.4_1612522941176_0.9152470819237473","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@ngneat/hot-toast","version":"1.0.5","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.5","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"be98472d9acf48e806bbd160a68e9270e7d1c2b4","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.5.tgz","fileCount":60,"integrity":"sha512-yamz+a/QVwSYPxivnfhPkU0xwhOD/3fHyCpSoBAZ0xYofiL6wDsz/cZpcKZ6VSj6oKuOE4+EzNYKSeRKaRIQUg==","signatures":[{"sig":"MEQCIH01jkVv+vh90AVKMNnN3uyzCkJJTa+xKVmQKfUgRqL1AiBm0+JgP+PtQ4rN8uM3EgKlHqthqRqCSsLorKFeBwRW9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgH+wSCRA9TVsSAnZWagAAqDoQAJ2EqUYEzlHBfNVngT68\n1NWzrZ1IzAugwP0y5DUYSkhB1JRFRShY+ZB2W51oQXecIVHQEUFNpdiROyDB\nAtFGycS9JutEcwIsQdrbFRfd64Jb66MYBWVgSsOfbtuv5lv7sIrLGELnygTN\nkhtgRrD50QvXHyW7WlSDpxQi4OzmJVxsjT4zpNkHzGpVAAQf+CNI6zS6Z5c+\n83XZn54w/Ck9u6qvtIzb+YeOEAn1Rd8NY2/DRF2BbcqrAStmn1A+DdYcB7tb\no6aXDate9Iv+PC/XfnYmbKEhFyxYdkyCi/s8IcDvpEhFuFnqtePWOnhUiYnA\nN/XFPOQv4qhG6hxfoXSBtsaRvzjxkqzIQ3QJgXwcPFQN9VG/Vb55J1lyObD+\noOKQe6/asuvydQ1aScOe5a2oIeULKi2oaGZ4xl/y22vUcT/e7QK2teeYyd4l\ngwedz29U40Lr4aEQ7CMHrCIs6TjpAUb2i8mz/g1QbuHs/PqpXMOagU68XlB/\nh2iUJVqaPDN5ZNOjFEwFl3mPDtfiBX2nXnmu5wXvqu4+8v0TWORqW+TDOMea\nC+g6i4pA/vJJst5rjM3pngmi8YThfU3BKps/4YDM7I+C2E3v6idzA1XQYQUV\nhYjHxb8OPEJ6bZ25aIVJY7FyWqqucHVnlzMGcZfFa4sehsKqCCASrKyplzEb\nxw9H\r\n=u4Ya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.5_1612704785574_0.05164208194444564","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@ngneat/hot-toast","version":"1.0.6","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.6","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"76f1e8181588ea103d4693c249d3d973291b4cba","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.6.tgz","fileCount":60,"integrity":"sha512-KEL/KJCQpgsNP3M30Yax5xHyt20tXUS27hLbkmKbsbRUPsYQr8+52rJTELmI2X30KqcBvdqV07dHSQx5RzzI7w==","signatures":[{"sig":"MEUCIQCOtwGFDXpaaB8LLX4R7fjrCQt1Zx1s2XaTYa2SvdlBUAIgdYqIUDNP6ziQtH5SjImzv6T6B9arf7aDW1jxxpe0N1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgILVaCRA9TVsSAnZWagAANT8P/ilQhsIMDKa4+Laik5NB\n8oqvkgzX42yggLyd3chMFGZInNjxI5Pd6D3LLMT0J337rZVEuiibCPQLbK5f\nznaIxGELrdKnKud+dF/tnDZMwcqYau3PTAp43iZ2Pym3OpugsqPUIk2r71tO\nqKzfFL7pKfSL2hkz9MGjylV/FV/VBpiQ9WdeuqZOEyDErv2IQ4Vu8k2FzUU4\nExf3hNFKfRh1mhierKNcp7BTe0iYMJfX7/p5c+2HT7WWbOyIaSeqH/6sSOD3\n9RCOevpji8ZwcQSt7gZ42kaBs8Rjr3XHHlERANPbCgMH+P/uA6jcHL6Q8vB6\nbtTQJU2BrkAPZx99pPUKcGPZknzpmRcSgJdOqdbjwgPeewYa60GU6i00UxKa\ngDEd6VRqhBS3JX4uCLMTOHJkedlNX8TnZOzQC4sntbdGOe7rHi+ccm+Zm8t6\nuZRQknsKVoSQ+0Gwmf5S4SwHr37Bo2E31zoWoqzs9AxsCNVlb6b7RsshJCsd\n4Ydbt2vV/4aZYbMVBJ/yJeSjonUHH0uR5o+Z7B5MzmPiRMir35RDBXNS86L5\nTwCSgeSplV3Ih1/ULyo+SWQ/tHbTuNQRgsnUgw6VfkwswCoIswmu0A6xxd04\nUXbME9GpBbdaeIglHO1KBGqHddr9fjdNJGJWsbyPY+54GOWDaP1xGy48GxjD\nxipu\r\n=TBGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.6_1612756314198_0.4942196698912247","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"@ngneat/hot-toast","version":"1.0.7","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.7","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"261c6163d3ada42fac5f687dc3e8b667ae2babf5","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.7.tgz","fileCount":60,"integrity":"sha512-OhISriqMDF22kIEb08cNsYrR4ykoLQDuLt6CXCLuEsXmE+nrztuHHjALP8e5gFEzMZ2wQ4OXt5GODgRnc4GGOw==","signatures":[{"sig":"MEYCIQDI7U+M3wGZKoCO8muVPlWfUriHVoV1JOV1mTh5Z9Kd9QIhAJFEJXecFMNWIaHzBlMOCezkoC+DYVgXrm2vqqC9KgGB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJMUXCRA9TVsSAnZWagAAOPEQAKRACyY0QB/nkAQ1LFL7\nvE/yOATqNIWkXyd6Waa+RY+iCEPD98b3wanjTXvzrKP2bO+l4d5fy+o2CmUK\nQrmMixVEsTOnF+Ot6RRwCIEVajcLfYW1tfgkus7xZtqwXYRquR6hwjcOGAYs\nWgJzNjiQtW6nYdhr5MynttlECzWLUCMZL9VDkZDqiisscy6Tb1Iev4vQx1/N\nZSreuhM+SGV4JNkGDcXLuOuX1AegH94jEN0ZDF3alw+ApqVIrMAJrOvgRkIp\n1u55jBzFhBF6JqJFHjueHfqMZDRLk3vDdDMu0gWOwRZAWHf3GRuPqxN/67zQ\nHIlqrRK27XwJ2zfyFaO2MhmU7hj5ORTbFPzyS3pdRk0awLBdju7rOjxdGDfJ\ntHX590jsf6VnLOena+uG5nob3i2jaOqUiaPJ2Ocb1KggnLzRxfuGjJ94Hndv\ndFTdPT8tMg6b2biqq6kgU9YeAIZGPZ6CkcxHEEKqA7ksgbNUvj1y/DBPBDLw\nfrHRfnPgJSmkl6gn6pxKMqWvhLI9j+7A9NNaZ+hejDpSiyz1s8ODyikHCEmf\nNBMdEDXfAtcmddjOtACEdEVkHWv9+41AhcBSEhhW4Xp2gatxMYfBeznYiiOm\nOdnV3YBZFgdL0YrNxiwOfsLFVqvHtiKRDMQwBVsLJs6iEgJ4Ww+R9b7Nxrua\nylFa\r\n=SyTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.7_1613022487235_0.16780972869535948","host":"s3://npm-registry-packages"}},"1.0.8":{"name":"@ngneat/hot-toast","version":"1.0.8","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.8","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"a2ab7ba76d947d06fb07bae67c3c6e76280442a4","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.8.tgz","fileCount":60,"integrity":"sha512-hHpw773CsJtMW0HkFF8+7B8M8j1W7LuXfaFpapNfiZ64LA1n7+iZDxcF7AwueoMsrBpMIWs3Q2RCjtNxH+aimg==","signatures":[{"sig":"MEUCIFSrankxrO1VYudDru3yx2w47VNLtIXGK+eocKA03GkDAiEA+GPZ5wIyfxcWLstacwp7BHZQ0zKu4JM2z3Tw12oD0wo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJN8PCRA9TVsSAnZWagAA5igP+wamgiwTvZt+V7caskxl\nxn8IlhXlg9/C3uc5ZQDUCJF34dOcjM6sHUTG8AMBW54wjSwy1CKX6HueJd9R\nLs/RNBBHHFmkp91wdtM/vhoOhKzz/6LtyRFuvRZjM2qvJyO4xlckgS5GFrKD\naRMtD24U1lgv/Yk8fSWEAp9AbAonqWrRknp2V3q/OZYY1nmbvXk/O+YdWR5k\njWU/TxVC3q62JT6SbUrxAGbOdnPqG98DtCCXH3vuGkp6oIjRv1/gcOtPSSQn\nu1B7/FqhFS0zKgHX7oULtpxAnKd3qmT2oMO/eth2WxjW3g6oNaNNZtUQ5Lql\nEQv7sPq9KP8rWSViH1IRvbK9zusLPTSAXWp8X6rhB7gnB66LYnSF6edhYRqn\nUr4nZe4l72iLjwHlnkUN6v2L2XY039niu28jK8gN1zXeoq8AphqTf5aA57AW\nhk4yaHp3XilLk+XjYvfOTp6pYb6cXFE70h+SXlkRe/I2oiQ2XvwFS48BLamn\nWzSc+FMvmjowOcar+7Sol1Hkg22gSoHNxuPSytDj5LmSq1Jl/LY9Jj0YZ73i\nc8C4j9faAbeQituna3bQZRMxWGzTx+XU+vK3bB/vIQlhAjmUnWzpkquq15Ti\nF2GBv+cs4ZpY5aBJgFzwjdVuNye8WRJRFL1kSGvq5erFPCfmlslWb6eAjVxX\nYkTh\r\n=YcnL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.8_1613029134766_0.26203605413489095","host":"s3://npm-registry-packages"}},"1.0.9-beta.1":{"name":"@ngneat/hot-toast","version":"1.0.9-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.9-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"87987d2fd7dd686bf44a6c9f9598207be6b5fb01","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.9-beta.1.tgz","fileCount":60,"integrity":"sha512-OS8NuT6LbiqGX/VLD12k9mJHggCpztmn8Ce2RTKfkQgDH7TpExbi233488qC83pxjUhVNDCOZMhQKQnbcEJp3w==","signatures":[{"sig":"MEUCIHNyXOoqI1AHasw4lJ8ZTrnehAreOtZHrQzejmTpA/obAiEA53m7lk+8T0dpjbZ7N9engysHCLB5F94phDb4sR8JPk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK2nICRA9TVsSAnZWagAAPA0P/jREWBF0O4CQleou6jfU\ndiMTGxHFjIeAtu6JZdvz7VD0usxV+4eGf3dgrnWbi+CzdlwUFLZKYyPBAbMj\nHOqc3YhdHkfOdwl5eomho8liBcxkQu7DNDlQ5Ui5Q8qsHX05flrvbc2qNUZD\nEPWQau6YLrgXOCMx+2w+WNZgIpFPMa2hK5njqhnZe8+vCdqwIJb6PpfQPDA3\nd+4Vvo3cuhLBmg2dLnc6Aw23ielgDkpjnH606B6kcLojsI8sVdYzI7n+AZVj\nhg04g1M25uZZtlIJX0N+VX5xKievfwznSntSOuJn2SwRm/lOQZUKCagKg1FP\ndqhm0TWkNLSPObao37MyllosXnw9ATk1Rv+VYn9iJRsIurXjdaTQkL/rf2lI\nfrpY8Zkz4BFZT2ri+yqqobZKygNQpfIZnCX6p1SDSBxipNfliFo9RvbdCLlv\njKrOkwakv+3qjlM3ZH5yRnjwJfNz7rtHU0Rxq0qsiphAszPtpJfk1V4ydNoX\nHzmKNbhfCeh481uCzzz7irWqWNQUqZii0JgYG49TDAzuxbD1ZgaM/tEazxCl\nc+1+4K1DSoIWM+Fy7KcGIwAOEcN6v21J3CmBacfmX9SaatdgZ+CKCf/SwtTR\nDIf7fOTqlQEz3N1li1McfCLUhY+1DaJnaIBq/hqCm8w1EGD30SCbg+1WCyL2\nKROj\r\n=PjMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id. | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L34) | The position to place the hot-toast.
_Default: `top-center`_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_ | Yes |\n| role | [`ToastRole`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L53) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L55) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L41) | Visual appearance of hot-toast
_Default: `toast`_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L232) | Useful when you want to keep a persistance for toast based on ids, across sessions. | No |\n| icon | [`Content`](https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts#L16) | Icon to show in the hot-toast | Yes |\n| iconTheme | [`IconTheme`](https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts#L36) | Use this to change icon color | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported.\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.9-beta.1_1613457863858_0.6233134347418858","host":"s3://npm-registry-packages"}},"1.0.9":{"name":"@ngneat/hot-toast","version":"1.0.9","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.9","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"fd1225ccb80c8a197e1c3fb7ac8326c2ee14e06d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.9.tgz","fileCount":60,"integrity":"sha512-402Iz57tDQOtue75h9B8JcqbI/VfAqkZZwKb3ld/4JNlV07azyi/uXE+cE09mGbRfI63Mq0fGhCFBUZIo8gm0Q==","signatures":[{"sig":"MEUCIAxh24k21/fjRch3KQa7L3lwoLn5qwckANUkAJG8aqAdAiEA2FNTTQAL/uP42hQnG5PAIAQ/A8gANR39H7Zv/wzDPrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK23PCRA9TVsSAnZWagAAvW4P/0xEDg9fcLAGPP4OnKu6\nO5oDPAepNmYpHOR37eMHbzUkOPrUh1HgG06lsWnBwEXpCzy5jdhCyBbGS/c0\nbeoJCD6IUlWj4ZvOVg02VHzU4EoOSky0RUwnm96SlmsDurdPMg9GgS+9ys54\n+1hkIR+HOhnnsh6ZSUlecwJ99xCECQFtyX/wESPGK66zm/UYeBqliF7Pm7Fz\nJ1uX33AyidHDzZAB3VR+KqVnLlYEvfydShyIV+Xa0p/irBqwXxlVtkgCqcEa\nn+SJ3wGaOFb3qdb5KNwyG8t7qCRyIPmbk5P6dACivDJFP258enhap0KjRxmn\nA9vHYbph38jicI0Yb+7LAqfFCtgqR2/oWpPwqGy3fDl0Ik6lny35l8QmtF1f\nJmAOL2RhnNadodv2Wqi3DiE7DDHZUA07nFlFMrr2HhYHduRBTF6gzQvjhi/0\nvAVkm7u7ctWaqt2EAhfDKvTA0m22oKIWB2h9P19R2lQSehOSIU29vIgrlarz\nnOE6uypAcwFOPdJyctmfCtFUvBiNbWw/mNMcY4J/JjFXv52I5PW0m3UtsHgj\nLj5M6DPhuRY0CsxVcbH5AZw210K8+5cbHZW4mehEko0vSWV+kBMFvxBUfIoR\nS9aWMwmioWGcFfBDytJaakOS8JTVeksYY2098LAGPXAN1s2ZaALFnjrfNdFM\ndm3W\r\n=b15b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.9_1613458895323_0.319189924755902","host":"s3://npm-registry-packages"}},"1.0.10":{"name":"@ngneat/hot-toast","version":"1.0.10","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.10","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"6c3eddb7fcf1bdc71c1a30ee5bb5a1c09cfb4bb8","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.10.tgz","fileCount":60,"integrity":"sha512-dOGckH+wI6ep7+/dwfXPqF9GRJnmPwzrUDW36YjE/PAqs9D3VzC/4BE9/2ySiA1ayalEHsyTytJV1qKNh3RLmg==","signatures":[{"sig":"MEYCIQC3HwXCbR3PzlEEkTzrMNgCDSV/6+z/rrH8EGLvIkeYQQIhAPaZySjd4VCPlKmFqIrP0EB0U1ebnf9OATCzounGlQF8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLTczCRA9TVsSAnZWagAARfAP/isTbkH5mPTBoEWOg2ca\nO1SKm1oSlNjAzGE2kPTXdPeiGAD4iqW7nt6zPnhPGQ9ov5INH/EU3i2lSdFz\ntS8TruFbzlm8Dikj0bZMNaAgvx/oX2M+7+zc3pt7ubg16aEil+eGzmJKo8fZ\nfnjPL89MY0lFEaW3ZfAO8heD/nsGaDq227bdJnugjF0v1Q9cwjrbvwYY+pUM\nNUC+4pnqLbpI9ELMJBqFBXs1Azby5Zdz7WoiQoEmP7QlyQzyTQac1ovhScW7\ntSxyl4FYT75MYW/RhndEhpwAlbPYTn2IYeDpwfeawWA3egvP1VXIRwEl6Y95\n/3BRuG4TxNLOBmWE1cTSF7+BLkC5KUe0rPhPEnfAdyh12UCRfEvDlvdDOsm9\nGclN1pRoYvCqg9AKTvqaS1Ci+BdkRXWR+hjOb3yVmNZAz5mSf7vryd8dPeV2\nTKOkO/3BViMPa/PQAFNnPB4fKEc9qHTKuPloXRjp56PtkEYENhQDMGzWSeH4\nOotf4UDHMxQVTbESufmS1ldnOjiWnSL2jj2e54hd5J3EZ5acQBbQvHblZga4\nL9amwR6LfqaGPpi8R1YY6o389vN+BKPqjx7rLd2+NBlKJCgyXsJgvuKSOBMN\nRweQYHW3wRpcDtpyNt/QCu3OW6eDCiqyBanGDW76/VroYzQmphO0TxKELtqK\nJwsL\r\n=+M6E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.2","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.10_1613575987058_0.7585566936988386","host":"s3://npm-registry-packages"}},"1.0.11":{"name":"@ngneat/hot-toast","version":"1.0.11","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.0.11","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"0b0fcf813c7824c635f9cdaf359ab3934628b933","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.0.11.tgz","fileCount":60,"integrity":"sha512-v3VqcYgKnCMq1ROxBCT1vaNsDvVtlnmra8q82JespnUlMzWYnQMc7vP/ULeKffDIRpnkpRGzka0x+USt9QAw3Q==","signatures":[{"sig":"MEYCIQDH9YnJzCjiPootI/2ESc03KAtfqmxm49RjQNHk6gjilgIhAIJKfn1793Cm7k81xnCvDzUv5lpYP9gXKPCeg2gQtLHr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM2lmCRA9TVsSAnZWagAAKvEQAI2pUObtalDRUjdsdyQV\nWj8UQbMRyHZCaqdqM3SF5cD6PB7ZJDrmQ7gGl0Rf1G12C+59EXW0ulUf+/WG\nhXaRaL2AnS+wVlrY4QHWKEO9eH2QW1oFU37KwNOqpoDenO8eAletQkGVnU1m\nIgZexzElpDA4G1qbRAEbgaoWnMArz/LntRrqxrepQih3j0QYf62XtUQqJpuT\nMxDqS0Q9UlcKLIQ0DEVqKSwyBvr3YJRP6F+aAf/fv87lyNQRPaOIuGtutMX2\nzya9pS1xW+X2BcpyBAqOwJ9yqUh5jcZi5Oo6UAboOZyXj4jq5BnRaAQy/WLP\nif4DIXOqe8wOF4SmcmQAuqMygMwqLvCZ0skcbTqyabsJItsPxfnb97pkVkPc\nbjCG0NSzi/beo0cMFj+RXUSKQxFFQzBmpHChhloylhf7Emp+/RZiTeRI5FS/\ngTsbJSmCvaRHvjs49QgEN9l33hx59snOKPhTvRr+GO0rVJwC0aVpb52E1frS\na5AW8fLm2K65A6+94xjDZn1BBZaTq9bJGAQHGBoz1OKUdI28DCL1MTvCr+hh\n6GAwWmpI/oU+ccefUwTUmKDsP0r7zLrxyUSZr9bwbPqU1ou0UHR/7CeYBWbI\nUg82ulIaEs1/46eeSHqIYLZr23zfZXBzYaNMJ1+V/z0DpnekN9E4BuVaJpln\nxdfw\r\n=pbCx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.2","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.0.11_1613982053369_0.26518380927587626","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@ngneat/hot-toast","version":"1.1.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"786b2ef86dc99a4bc247afae347e182ae9861e1c","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.1.0.tgz","fileCount":60,"integrity":"sha512-GDiygIw0AynpV8grXv88u/81eFiD02YL8Y5o5eoceklEsoJ1X363bMjU/5Gimk/kv6G1Eex7XcouMx80E5jf1g==","signatures":[{"sig":"MEQCICVJ7wU/fsE7xlKT9s/cuZTLQ0tmHiHHExHp6eZJ1xCOAiBt3+VKcr0NGEL5yKsjzXkUjcoXb8ppWwtxhAv34OK2Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPewMCRA9TVsSAnZWagAAeEkQAIaAF6W/43J2MydOGYan\ndSIk+CpTtliX5P+1kQ3BREZlZ+A4lpC2n5Sc3zBtm/4j4uvGshaiYRJhYoa/\nidF1W7Jpi4x/wrgfPWw4oTkHn+8DyaMx7V0EIXaIi603yDst3rAsCbwKhgwI\nPU6h7/ahDREPpdJLGJngVEcjCb+8VcrRHkCEYxaJv57QJumEmROywTgQVbDI\nGycw1lRf2U0YdyTihFAH9JnlVsRYmT0XFkZVn+Ub20STz8Czsb8AMMdpUE6A\neff9pMRl9VzCZ9VOmWh1ETOhYFQnLcXwBUVmheX/zW5imgjYs6yesQTC8tW6\n3IT9yiSDPy5Ku5QhM09/LJnib6l6OvCdPmMKS0dgArh0MxJv/OpJV+IFK0/+\nfv8LgeapeHaTXNHtht0uJRJrcbqYVQzSxUr9qIX7iglVf9yKbETRrmEx01y+\nnscdUieq0xFDpUH+Zw4BD7OM3NVxiPehOaKzgYfhe7eCocgMrtpS+LrUpRxA\nFV4Vlg773DvkmptrAUReSic2668dRv3N72Zo9Q7CGD18C2noCjek1v36Q+6P\nYNiQg/w2z3Pvl94zcGsvflZO2ZbdZjutLs6rm5+KpjUrsuSvDHVDsUucAgWs\nky3coUB/m1GK6PSoKA/zTbDNEglXGS+LAXIwA7l47Rh1BMS8YpetqkOGzecO\nYgv/\r\n=JZzO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.2","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.1.0_1614670859830_0.17906752335510379","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@ngneat/hot-toast","version":"1.1.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@1.1.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"431ece220821a9402dc6b178ac7fd5b95bbd415b","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-1.1.1.tgz","fileCount":60,"integrity":"sha512-DMXfkH5yXvtd0WW3rNcWDqeZC49/vn414HVTqkzylSlNQzKKBGQjCHgqmvQAKPsCzQ5RVvOJV2BobzCCdW1R4g==","signatures":[{"sig":"MEUCIDv8FWb+ir1aEVAyfX2V4NcxdATGWCWl3UwTOcuxLNxPAiEAjCBPD3DhxFD73y5622Bt3Pq6HGWrjXEdEBpmHWUvb1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPgNQCRA9TVsSAnZWagAAJyIP/iZas0KT9ypAzU2E6JFP\nDdQKxpl5EWXguvkQZ8hbqFDXcwbjx+Al4+V24b68t11oVBcXZWQKHBaQX1YI\nIb79H6/U86Qv2N2a+JtjNYiLaQygouyGd4XzludZSYemNDpE2jVaxttb/TZc\n0YGVi79Md+LpNeJu6B55nCbBVKrbRQWWJlNriP32cQ5I3zqQxEiMnwWBDTm9\nLata9XMyNsXGh3Re7EmZeTT564tGB6F0DNH5Rxw3AQtc8yr3VEZ5Hd9zJjm7\nPj1cPRgKU8alWpqDiYY4OmoBVT15Z1YWNKlbl7RRYkIsHLC3hXbgMxP3Sr3Y\n9DF5LkzQRhz+4O0bmaL8fLIdZH/vM9YqMMCs/Z/x+cOi807GaxBhIud8mdM1\nHZcHK9JhhWWKHK32C32O0SdEG9bueQEg1O5SGd3L0jxkcwjV/BICqXnqodo5\n2F/ckrxA5HrMgt0s9vRanE9No6akBRuqkI5LHrYotW04oCkysATCuYE5vOZC\nJUEI/sFQ3/6YMxd+Nydm6CY4rrsD+5G9JvmLsnhPo8RDLbW6TPx29vnl7sl6\nfCt5eTV3Otp8gA/TBfo0M2cvx39XuHrpWxfnoIqtk0K3wer4w+P98HbiHI2O\n7YDR4Wm88zGETpc144mrSxjAFfqQ03LGHHD2IIq9Y5qP5UDHfQoOelyjo9NA\n7xbF\r\n=5qpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.20.2","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^8.2.14","@angular/common":"^8.2.14","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_1.1.1_1614676816424_0.4578945107575201","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@ngneat/hot-toast","version":"2.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@2.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"8c7813e1e4bc4959ac5407850b6b56ee042fe555","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-2.0.0.tgz","fileCount":60,"integrity":"sha512-BqnF9ciuTFFrSSd7SwMJ495mJvtYinHx+pC+BuOvXayUMIPzWgWfkdFaqOYy4Dnxsy9s56MxIvVsBa1EGijRNQ==","signatures":[{"sig":"MEQCIAyP/WhRs73k5WiGkeT2Q3vBT6IogVoddXQrDS0cR8k6AiAStZXQPQKbc6yA9Pp/D2s86C8die2SSfXM8JlqSvcBLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":512765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTa93CRA9TVsSAnZWagAAL9kP/ibAV0NzQCjMDUaMDgwP\nHdcu4VCTCX2z3FySCkR6CExC7KGN0QtJuG36Syc4o2l9z5slQ9q2J/lNLM3x\n59fRg0dILPM4gWxRqNT/6jK5DHcugj3NL37x8/gHV2d9UjK01mfaJbd9jUzh\npfSC8TiqJmRIzhKTv6R5fSLFGp1cIT3XTMeHuMXUXq74wfus+5jqXckLoB5B\nweNYHEIr6S8bG4uVHrv+RVdwU0NVXay/9/PI9VU//dxgSdJXAhDCcbo8K87n\n0N5gD4fZkBMwv3ol/Dks493FcL9fvEX6a860fRMVhIVyoJZM7xqTT998KKaW\nGtnaG1N748y8woD2q5s76m3QyMuebCED6N67SceZy5RJWibtmca4GT61H8uH\nvWCDV7FzqDcS1ch3BuG2YXFqg0TxTVapr2plRnAZGvWDzlnImk/QayAsBgv3\nN0jBtGk+nZweuC7UNnHmEUk7sssjOxKvTtV8uF4dyQphpB2cpL4lxukU3PHX\nJgPx127s1dqEkkV62qHR4vl+JoVyElX5labkrwthWf2DdoDAWendkMtlhhhX\nqNXTnnB/l2mCCGHgEXWeoafbtUsSu3E9kRY3hg6RqI/Qgct4mk15Sh78jTEq\nCev5rYa1WqOI4i/VRe4Cxd5WtMPiXqzAO66xjcey0mN+YT0TsoEVTHqfNuMx\nQCda\r\n=eEpY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 12","@angular/common":">= 8.2.14 < 12","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_2.0.0_1615703927059_0.5280905832559881","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@ngneat/hot-toast","version":"2.0.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@2.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1b3763a0bf63a8cd0f378d54238ba385524d8eb5","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-2.0.1.tgz","fileCount":60,"integrity":"sha512-XTw9jP6jFEstxMKRjD2T79wcJgGu26MuH/vMWZbTV6tmfngCbgNc0Pxjy0b7ntN2eFgoeQdYapvjQlfvoohBgg==","signatures":[{"sig":"MEUCIDGhh576009zA0q+3KNd1tzyqzm64e4PfDEOs1IYEpuKAiEA6Fgk6VliXMyOkwPTuYwEvUGLxyKAU57PcnES392pwhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT1ECCRA9TVsSAnZWagAAjbgP/1LZnlFmkEGWPDB8OB/l\nDnKgj+2jZSxq8ArXIu4XeJYqVZA+vwv13l37wNYI58sMJXnIfL4ck8DVeevF\nAvD1+OxB6eMUpKuHY4ehXgo5Fg41szKdjrN07wjc8Hgfn30+HqDgERPEwbtJ\nCaiP9obuaDSnlP48V6/i9pkA4gpcG8mRlSia9OX2RZooS2d3AdDRbT8a8DL+\nQWYsHFrGs18eOeY7lb+0kyvnoH1sTLnykEnPa8yEjZbRkzWFS//X2piRWj+7\n+NOnJQz6zwYVRiHVrdHm7DdcVGWCaDP3Qfie6V49yryhxPTZ8/PXJudKFOBa\nWAC4x+EALC1wPJkW3HIqazlMLl6kI3Lxg2VmoOuxunpH9ok/QF4OuaoJoZ8b\n4SHHjnQCU6a1xj/v1M36Mp11trKKZm2r9Zk8sP/uc1vTsvFNrIaCy2t5MsHc\nQ2hM3y2r1gqHMEzeFJ/YQB58RT/8/a8wu1TGBPrqKz0bVKtE8cN4msiLbYtP\n82SoTpWXsEl2yjD71v6cXxEB+Saa1EDvgQ2R327jMQ0Z44EkWDqMZccRP7FZ\nkgUgOUCHNP+7nV6D3ismyKGIpMZthlTv7h6jBvjOunxQf/nRhOUzJjgI0lmy\nXZfou6uxxVg2wM116pYyzm9ZeIY9zvfyJrFO6hRAjIl3Yt8knCWWhwa30P0m\n636d\r\n=er/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 12","@angular/common":">= 8.2.14 < 12","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_2.0.1_1615810817911_0.13744143303856293","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@ngneat/hot-toast","version":"2.0.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@2.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"9ab55b103a49ec355451df0d665daa7fac323181","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-2.0.2.tgz","fileCount":60,"integrity":"sha512-cySj7rdTxOqPl8Bb+1EKV7p5GiQOaaFs+3yGjQbjrpAxjnl4h0k1+z6tyx9t1oqqUuXF5u0lWX45791TDfbY5w==","signatures":[{"sig":"MEQCIExIZ2HuOMrPSUBmvXHSvwioJuKJF2+qLVTNSS27Tt5YAiAVix6VhDOS3zc5mW5vuxGeVi4j3dmwz6G8/BYDq5oj4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq7NYCRA9TVsSAnZWagAACYIQAI0AFObXe4OYdsYYQlTv\nRTEPLuUP3gKaxlLqTVJ3rksj5PUmdEIWzCO4LfTxbwIlIdA97AdzGQBlgq1r\nLiJmWdMlTezfiwHHsfvSh+y8sU9mcROn41eZo9Udgq6nL1C3i6Yp3agFcHOX\nrXCKDAKHXXHpPZH+nNtE27T620Fn4uCOvcun/bTd534vGgoB+OpPk16dA0N7\nexAoTJHcDKy9hQ4V+rBj6GiKei+gOnZZK6VKAUHnxQqU7ymY5e8lqTbwQZw6\ntkE281IWJn8nPaSHJovO5ad4YqPXEVN0QKJ4KE+iuK4Ras+fRXkMQkGMtLAs\nV0tW2YVXV/b/AXSROCvlt0ZbaXDVjMAhgwkZagO+wMRJU4bEfDkU2s9NftT+\nM741goPqySlk2VRvNWuMNvR+6qGmD5zGsFzlS1dbHMkQErQU91sw4lkTeLHS\nntQ3wmmL7q0c99TmYcljCsoSPVp3VtkEzne6//j0WrVcJQ+OqPjMp5B1zdk8\nJRt1/R3r75396jpYeNSQxKdWbmopaMrmbpndlsEykFpTAEU0rX9vwk8s11T7\n3s1zVwluFzQxG5eL8st67K2YP6gE16KRpdopNjTqSNSwcqkAGNrX6HEfftdg\nd0wCVwTPP/kM9pkD/eaXbElZh2Y8XYwX+ZAX5yN7/sZpKvkbYPy7FnkBisP4\ne4/E\r\n=RYL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_2.0.2_1621865304108_0.9302961720649032","host":"s3://npm-registry-packages"}},"2.0.3-beta.1":{"name":"@ngneat/hot-toast","version":"2.0.3-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@2.0.3-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"dca779f65e9a3f9edc2eb0135a4eed4b61658a9c","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-2.0.3-beta.1.tgz","fileCount":60,"integrity":"sha512-iIywHBIqHU9/0ycOu6yLlvCuLbUVnL0MNuUZdIlgEHm3toPuj1yo4l+tBbA6Aj/g1lI1NakaSS+UIQMhCSWBBw==","signatures":[{"sig":"MEUCIAjeFjk+cRtvvNEv4xacpHj9skT28lc1BOLtM3pczPs4AiEAmuRcj0G8TVsBzfKkAd7m72Wy6cuIKnDsGlZfye5F2mE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvhZyCRA9TVsSAnZWagAAQxQP/3wbtJwviiUFDvhnLcId\nuYBoEB4Dv92fRDAMrE09FR7BX+swRN9W8WuwDm/+DM574Wck2e2yOiYbb8xK\nnIVavw3GHTEMMMmA2W+iBz5/5fN5jUnjeZpbo97Uw/Cjb/LViQk+Y2jlsADI\njkFSppy+KySJOpw5P/Zf1yE/wcS8NJnbOHM/pcS6P1hEdbv9QCNVGB+RWiVS\nlAbhSDLl8ObNjUaNlgJg59KS86Lm7R3pFYg/mtcicHeRWltAquBmLeO+Z2J5\nxmkT0NSgmQRmrjDc7u9pxHLuHbk8rq7braGaL8xCXk08RtiyVSseEPvGltmz\ny49BXbh+VkoqHE2j2yIxCEz1A0hOSggHz4zed6Dn8imA3AsgCMznY2/avRWM\n/cwRdJdXtjNqTL1kLuD1z2Fl9f6R0zB3PA4yyNrH+06bUnNCWbQfwa+XSvtf\nq76iSo23yqlEnQQsm+8Z/hyqWu8dVTBbuV2YBZg2bNyr3QAao1swQotPgoiK\noCER1YWuOIQxaAjvPKFEGLq66r4eZzT1kbTs81SnPLQHUtmYxQxNcYl/zOqo\nKcELo6P5UhGG9BtgEnsjdr8+1KmY9xrCeXgdeJ8r5PvvgVZhJPCLdztgr+ap\nUQOo82ewl2r926Og+SBymCMMpYMV7Fcu6I/AKWH2F47q8gl94rc0UyJf8at7\nLah/\r\n=hX6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### 2.0.2 -> 3.0.0\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_2.0.3-beta.1_1623070322075_0.28385764550555126","host":"s3://npm-registry-packages"}},"3.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"3.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"f200105a04dc4899cc644365753a38e73dc751ce","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.0.0-beta.1.tgz","fileCount":60,"integrity":"sha512-CPJp0Wg0pjAiJA6G8KddhnJaz7ywZ7ioX7j9UKu2cDGOr04vSMh3W4GKa4qdeIWMswFiHWO+vZFMN1IdanFmNw==","signatures":[{"sig":"MEUCID73QxC83Jnu9SsKtnIZrMghaNc6d6kWaEOu3XTfjl8rAiEAp+35Sh5OxSDCD0ojQ3iQCQr/WpIZw/33HNi3/SyYuGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvidQCRA9TVsSAnZWagAAv5gP/1w4x6X7kT42Ksa94fiP\nC3QkgmqvKnvgW0wUiGbQtmUFg1M+mj6ebhzPS7AjrO1YEoYnAEHCIzlfx8cg\nR94w67bjIphqJwqGv+r/apCRQ2iWzp1E9A7XxE2WuEy9Cnhe2q39AT+uxk5L\nyUibLFr4JJP0jo5Y6eX9N0JYeTErX2MsVml3i7tV2Ef9OAdrq5JOIuQ9O/zW\nuZfzTVUsCvOr+DwuY2aeeSEd5m/86UaKvVMwL9l8yfuQ1gg04kKQAAXq9OqH\n8Lrhjcei/dxF1jNMjPgUzGAsWk+DSgbqL/NxisHSmQzyaQins4vD/Du4RmJB\nugHrIwOSruLe49IA/gj1lnTcK4Bd2W/jD6h6EVuIRabIoOQ399K6OljfpgWo\nvLZC1Eit8TZLrg5TikD1o4XdY/+LYLGzvbXPTgiTC3dXbntEXpIpCwRah6ju\nJgKHfqlVhfSjD/lZpszNN6zhjTrv+tREerO2+tBbpOg8SpdNAgmCFOvOe+kV\nnEu/g3cUWnHsD5Ngi+RpAMnAhOchX66K/1Y+Y+qVk3GN4SmI3/ymEad/VCql\nULqHyJfiDTsKwWZLNuLnTTO+Y9VplghwUhDyKREy4aQm1smoDvR5AqfaY/s+\nSV7Oz/GwPvxIG80Y0ULcKAiO661l9646c3r0zOIf82FkMNByrqnBob714kyG\nXM01\r\n=ZxSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#3.0.0)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.0.0-beta.1_1623074640805_0.20675904169578474","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@ngneat/hot-toast","version":"3.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"b3272680f833b599a995d48d39c9484447378339","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.0.0.tgz","fileCount":60,"integrity":"sha512-QoLzo1nzSTgYwsUwn2T5SsP5VfEi50UiwZH3pzK1+7TnwgZYNytju5a7t5j7eSYVUZWZ3/vDEPV68dan7ak3vw==","signatures":[{"sig":"MEUCICMagP/8nMEALL6LtcQlbKTnuxeihS2AUxDujWa7uTYLAiEAyZFbwh6fUq4u6wVZ6B/Eq/0ggoIu6uqbJ2y4YoU3RMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvi5VCRA9TVsSAnZWagAAsT0P/0vWR6un7yO66UyFZw5V\nb6cBSpY6xLWpqBjQqCdOIHYJGXI9uF8gyRdw0rTJOpAENCJ7Av1DBJ8ZYP5c\nsI9NbUL23zFFTOUCPWyrRL1SVu+QuGHhkwMVrAdvdW97OM82J7759bkjuomK\nLk2xzuAuLyO5txkql1u3ET1FG3yK4fxYAlsktMRbRgbdorL6VJhfFBnEl536\nFFUT2Flq7w5zZnMaG9L4jR5jjmmVbKsG5ekJ1BGXa/Y5h8/eTn38aaVsW4v7\nDA6lV2qYE6K1W1V7bi8wnMrDbrFVEHkS8EMR0jJS5OyuFynAg1c1r8FkZe9k\nwo7WlnK7DlNox4Mv/SB1uRwK7/vPglWJueXjJOVwpiE2poWaMo96pgXfFOaJ\nwFcCK5cxyO9XMlbhitzOLcEpY8Lwj8eZ4pUMREW58SFBn0Est723r7FHraue\n/35OHXrTeuY45was5lE+AUSXou/DOk7cF7DE3Dcz6mXd3djU0bP1dHGOi315\nnDsHCdJlCGr4GnEiPJ3itgH6gNchLLKIn6RceUBFhfcttgyNzZgRuu78toAV\n3Rv0b2vEuW0t0x3YwDxNIXwOoWtO94n9mfpfxJoKn/xTgmAl2NaegtWwsw7d\nGTD24kr047oL3oQnB1TPhk43WniYwBHRcWfE15DOPZv5rwAyWVkyXJV0ugNC\nrhBa\r\n=+guQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.0.0_1623076437122_0.4251168808109842","host":"s3://npm-registry-packages"}},"3.1.0-beta.1":{"name":"@ngneat/hot-toast","version":"3.1.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.1.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"993b373491322892d865ea8806535924f5506a47","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.1.0-beta.1.tgz","fileCount":60,"integrity":"sha512-fQDVKZ/A+iEBN60eDq3DkocbKxI4eWQ4RSrVKckqd52SQkLjqPw4AuCXG513X6xvhWC8VFLxr9szwaNKVh1RvA==","signatures":[{"sig":"MEUCIEQ9e+XKxQxr7YzP71sAQA8WgRxgZgW2RN7wnYJcfpp7AiEAzMVJBQTnb0b5QI0x0byH5rzlXMAR54Sx8qQXPkynUMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0f0WCRA9TVsSAnZWagAApoMP/RDESH3tu/oxxgxAmcE4\nT/57SW7wjkbu6luLLFSzyR5v3S4nPeV7C3Nor66P2nDkd53j1N9L3oyuaW3T\nTtp6L26Hg/a5xsM7oAZ+Edm4WySyNlZVmfTI5t9KPA7EzuGzhIrmJyGdvfI5\nE4jCpeikhJt+Lj15hHUj6ToL9aTOE/5C+17C8EIBY7D641q/8RxQqbsci494\npSYfsCTTK502kexxaks8Wh6/X3BV+9KTO2ygoTC0JOaWlmPox9PNXv0Ndmbr\n9g8s1I0DWeaF/YJ7WT+hUWnBeN3mcJvIJudGwGfGacsFTbKjc+IpZuUwCRWj\nnEps7Jxc4yPIFD5VZymsfmRl0Y4M10LPeNUewFYSXM2uG0+5SocTNKP3Oejz\nC5hUtRjIs/7YpNEfFDT/c522+oEP/BmWyaeDssfwiLNrArWl/qsq9RT8mIfX\njXU9LBk2rk4scBO7pC6szsY4jTM0GPNDoDH/JQDIhQAHLkO7EaLtLCjm9dgX\n+hLHUM3JhgAKog/7/0Cv5Roe5FncuLu2uWQ+iq3P5tl4HbC2N59EOWzAwwuk\nKA7Nf/UT8jgFShUHf9oSThXHO/9FameiPLFW1ltLDkH7E2fyAYEZIpPRGrlD\nLvydAQNOfhOojm81l+6umfUzpn8E+dqHaTrD3lNQsK3tspbiz/biRphC2w4o\nNz4J\r\n=FmWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.1.0-beta.1_1624374549512_0.02127223141761947","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@ngneat/hot-toast","version":"3.1.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1338530c70d77643abf9fc344c1e6f600f2e8683","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.1.0.tgz","fileCount":60,"integrity":"sha512-lbBEkPf2/I6L7yXFK3bssP/yNwT/uV5P/fuMgWeB8t4gHIPl9aTwF+j2DWhYEJGoDDlztvaXaimV6Yt2C8l0+Q==","signatures":[{"sig":"MEUCIB1y8/RyaBUWpzcQUDDhR/iJcGbL0BaFtdl1ITuzIN6cAiEAlL6pZQr6Z618jBorRYlNYNZYPiTxsEa2CLGrEcaVkKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":519801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0f+9CRA9TVsSAnZWagAAB/cP/1TnXTTQv6Ff5kGk9Xnd\nYwWype6uWCxumiA9b6mz3PAdyYt8/mSOhJmq6epH94KAPZVEIEaYzK+6s+16\n5k64uvS3Vq++VUim8/Nj5u21v2CI1ZxRYq+71xQkdR8Ec9BlA3L9tMyMHy1L\nJ4CHwDsx1pFcXtbHVAQJEp7Lvq1fgzKGnzP0AdQRwNZBWq/a2FAOA2Ide+pn\nUicm0xMaZfDtwV7L3ce+cFxPT4KlzjYaCV6kwDnVKQX0TmrIc+BUvg/sZB9L\nxZ+WAVwjN2HKrdn6NMmOtlBXLiLpLF4elQatjxPN/GEkfUDNCTGozkNs1e2L\na4vKOyFdPUiz+yA/jtuIBMh2oKwNgt6c70banvrfWKXEExEAQGy/bWFXlvp4\n6bRGGoeJexkxvdjWxoqyf2bOAexBWLIw2IhCkEW9xaKecb/b7ukH1dyUSqS2\nxN9KC53otHH0el23sbPDUnTeELkHyElNEiHqaTcHLh2HNGIHldkYYxDdjTQY\not1f/CjJwYpYFWFAxm6lM5SVRw3IKZbveSNPUo3vDoZpvfwLBgMYYheZ3pTU\nSqlCpmDKS1J0p6S4IdUaKr5XMhTHAlE7DviIRVTfVx9hNFnsesZUw5t95MjE\n7lkF7z3W2JchBqOD342z/cpTw+mMn/lWTfgU9Yb/9lzw6q9vzk30ZA+0SLlw\nWbyQ\r\n=nOce\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.1.0_1624375228928_0.3058258487188361","host":"s3://npm-registry-packages"}},"3.2.0-beta.1":{"name":"@ngneat/hot-toast","version":"3.2.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.2.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"a127c08630848e16b7aa214b3c9a73946b4aa001","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.2.0-beta.1.tgz","fileCount":60,"integrity":"sha512-3XZbcRRQveMMYPaCy9QF2TTDXCiteu2pPlvhTjhD8Tr/YRorkFCgjoNrFj5qmWris/zcMtnpgCgWahwR4cuXOQ==","signatures":[{"sig":"MEYCIQCMPDfM2I3oi6iiE1ts39hHjpzuAVpFjS6YM0h0Z+PZUQIhAKzb0QpigWTmAO8IG806ax9+gxUGEX2cm1HGZq+Jx2KH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6+GoCRA9TVsSAnZWagAABGEQAIJce0/SQF5XL1wuKkHA\n3Uzy+PRZC0fIbS8BxwVkAHdcvhfWCXpjavpYUywf01dXhBVBngYLYRw3kwRg\ntoZqHiJRt69W3qWhTcLMXDRvk5302pH/0FUIpJCTYjW4GbglR8yIEjfjRW60\nOOF+OOygQ3XQ5sNcPBZLv3ZSDQ3z7D7mdxP1gSejy4DKKPEIYGvXZ0ZdS6eo\n0hOhPKa8w3NB52RiBdcxdKQCD9hIPFd7Q20BA0P6o2N1qRD777qxsuBeYq5X\nwNMH2oLG5aRc1QPeku6303BRegmum67j52lYk555bMn3pleEyJYpiQpj7/vx\nks/OHrrzst925Uv024Z9qLGiPu2fZn4WU/46ouwTku40PKBtnqXTlPZSVK0x\n9XIiX/EsZlpukaOQ7Rqs/0xoDWuvW9uAqO4LmiNiugPw1wM3I9yyIRHqVNBf\n7WC2CqX1GP9W+bMD1mK/Ox+fcnI3vqG2PgZhi5ZLN9zuCKAXfpo8MPrMQ76V\nGqImMXcTp6CreuHg2MLrSHcqT4+KQqkZ3i98tmNOx2NP9pUzrWPpRzeVvDo+\nb+Scbc6XAGk+BBXvTb1EaVOswevoorMnWAfE3jE6W5LI6BzzCRYb8UP2v6Uk\n2DZA+dEoWgYUq7+Mn+CTw2ocgmFmh2WGz3ktH7zVx4hGIJ8bU6Miq460PJjO\n/eW6\r\n=HQSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.2.0-beta.1_1626071464243_0.27227179027864556","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@ngneat/hot-toast","version":"3.2.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.2.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"4eaeb3526a85ed8a0c8753e839a5c2f976d9e0ec","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.2.0.tgz","fileCount":60,"integrity":"sha512-LANyvgZB6vVkx0ejV0aLohx9IiFCWjmt9t6CKuy1iZr1W9ojq9CClkmY1ducDY2daJe9choU7vFZvCGSqWOogg==","signatures":[{"sig":"MEQCIFQxPLPuGaS65AWH1s+sL4J1E4FFOxiO4C4m7NqTmdGKAiAVoAEUUAtEdlpkZQlhGqH6s3mpi5OvxLklWqWD2wuDuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6+KPCRA9TVsSAnZWagAAoCwP/RTlB0qfyF/ww6aVciuN\n7hVwyb5AIVBcW/UCaSeQGT+qpz+BN9VVw607EExa0XeGQE4Jcafqa0EpYtP/\nwE0KOWW9yrIwjMlVCy985Tlwf5AYXLAYIXnHFlxDd5Htk4TiaVMAXQUdQTs7\nWt6NuGEW7xnAzI/gITgBjg+ez/9o4zTwEyou27ocQzRHHegxCwjEldj2x4Yh\n5IxBzD+aLytJeHQjaPrtXNUQN5iVXKh7ygguNU7HmGwHNpF6LFqzjet5riS6\nRD7NsjNiHHbNRqWHpdgUy3FRco5f3T7VE0f2aO/MHjoCd7Fa1fTZpkDb/w1v\nAzCcntOP7qrWlN9qFvUWjvmgE8nu2rucxUH2zGL98xh7s2c6NSTEuGpZGrnx\noaTjBGk9PbhlRKZAXKboavpNv8B0Lk2YfTZMX5M9nbfQhxNpbO0mc9F7fJUQ\n36jPX0sOWPlFbiJcWonWACFD+c5sO2NhEjtX2v8jPK+jNUuMm3W3rxcxURrW\nhGqmDnlPs0GvLpDf1u0edpDNvXu33500wrkjjbtT7yQcIjpIATUiOjYNu0Sc\neiDKbaie0znqLvkcJknhqkjyqrrVd1YsgnPK18He9XTrdaZo5+Tcy9BpmK+K\niCLaqj/bwZXNg9/MJyDdPFFNlwexNrVagKLLz6odJ3nR9ylKvpyn2+XvSEjQ\nIXNQ\r\n=IXQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.2.0_1626071694748_0.7329849884046369","host":"s3://npm-registry-packages"}},"3.3.0-beta.1":{"name":"@ngneat/hot-toast","version":"3.3.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.3.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"cebdffb72630891618396f6ec89af2b23dddaefd","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.3.0-beta.1.tgz","fileCount":62,"integrity":"sha512-+Cb3GbI1xOmXJgvl3Mn0oELyyBvxNpObZ0zRuF3pd8XyO7mrpDSIhCEuPW+cLWAgYpwF44EKmz9HUlMyfQVC2A==","signatures":[{"sig":"MEUCIHJedx0nCSCinzLc8bcTqrXiHEBo8Lei/pxKmJGaVw84AiEAsilIeEaKhXYpf17B/8M8+rbduFYt6MXJK/ZkOo17sRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":574542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7S2/CRA9TVsSAnZWagAAo74P/36yowbquY1ehCSdM6GY\nd/jrf4om9gBD+wnTDJi97J2gTYUbhyUXBvA/cpEP/Y5xaj+tKVmyli2nn43Y\nDrC2IZJ/J0xxlHx1zDbSn7wuA1VTUqh31M6zpLQ0wRhfQ0TKx26Ip76e4Tao\nCCYMgh2hULLFjx1Poxdf7Ba7pMIH4L5cU2rN+o4NLNSOoBwmQRVeNVy+DsRz\njaBZjQgisreZTTT0g5+yTL6eO/1T0KsuPzk4fszAnx5E9G8oWAuDii5prWN6\nzlwdRPQLWXYHbjDQll3permr3he/jEdM/mYHbci+LdPKy6uC+NLHw+WBFFiy\nGisCdIQy9/SH/E4z2wBngBsLpTwxJXJTJHzB8sSWET6vHvHIk7YEMSyEYNKo\n8Et7xr1nXNmMzeMm/UjMmJmJrE9sF7+pUPMlY4VL2T1SZqWSh55OclR5YAJa\nSp5M7ALCbD4l78wJkG2mpK/aYWdrT/MzT4BkKVKgaeHyrNR1rRGHRo6Im3R7\nYGw4a44JQCLcL16POUTk0+1TYJJmuB5mBafFJIOll6+fxB6YrXsYcVSW3rQx\n+xANG9f1AdSyo6lh+e/7buKieE33q63n6isOZRbgJqZ6zbGoor18RLQP8alg\nloThb7iRyfZLZ8rl2q+GAEKbHtegXdpwvAsuJDCtM6SSxi0isv3cQLpoi+Wb\nUMwl\r\n=Qwyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.3.0-beta.1_1626156479380_0.8636155565494006","host":"s3://npm-registry-packages"}},"3.3.0":{"name":"@ngneat/hot-toast","version":"3.3.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.3.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"91612ac907b1568985d996ba3865a4bf4c84d04d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.3.0.tgz","fileCount":62,"integrity":"sha512-M6+UqIWOhnjOpquxw4HF+AacZtKa6uPyqrHetb1omqkh0UY5aIy5t8f2gvvWpkOkOgA/oD6D0Tz5BZbtRLgP8A==","signatures":[{"sig":"MEQCIFvZ7LfxvvXQQQsLPb0SL3pFWj3Ga8k+wffyvLbvqIqLAiBSSouIAti1r0yRu2U3Yru3LhEWWHVdvseFB+jRbi3ukg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":574535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7TBoCRA9TVsSAnZWagAAlicP/3j9FxzJPxj3XD2qg8yI\n7qck4ea9pR2vzUJcpa8842t6vGrQPUitgpMkS4+sh9jNVAnoSt5f9et5dFds\nhrU5Ig7EjOgH8+46i7VM7yoht3HXji8e+0WYIrs/wdB3zE0KWX2vS0b0tU3Y\nkU5D9OrWu5q30uW2Q5whjoL/o6RCEHHJ8q6rdex6K+QfCVzZJDid6LV+U5j9\nvIKEPcOSFsmcQmP6+imaPoy/hQZx+7O0PL/l6aMqqCe/M3/eo6VvA1V3wqjQ\nHqQYVqY0CRY8xNDgxKW6BNp3gKUVt90tG7Sn9TzZCj/mJCXS6WSFad3fatnP\ni4kp4THOis/A1y/LWE14QfUXFQ5C8s/fECD/BveVqx9say91v3B6T5bHUd8g\n4Hu42+d/FYrVDroeH9wicHsqhjUKBUo8RvU1bgboB7z7pFR4jAs2hp7bXBA7\nAnxyR+iz4WjeUAO1tv/cs+eg/DxF2e3++8Esg1M5CAyLonQvyIVNxsRF3Agh\nKqZ4vC4pWaFgKdZlhQkFYKOd5ampMhTTWeHOQ6Yi8L4K0eiocUgTEHkDvyWE\nmoLFUWM/BPZe0anmdttu964zeIOm+f1G4Rc40Z8hbixs8oTMDhBFK8xvInFo\nJYHZL6Yuz8huEplfC5bit7bDGthWRC/b3N8nkb7Z1PgPO7zBDD+H/8G1Wjtp\naZUq\r\n=MqMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.3.0_1626157160139_0.9111159310202601","host":"s3://npm-registry-packages"}},"3.3.1-beta.1":{"name":"@ngneat/hot-toast","version":"3.3.1-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.3.1-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1a8a13c5ee2e41a8b74b5aa2eaf319b4f81ca366","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.3.1-beta.1.tgz","fileCount":62,"integrity":"sha512-62O8HH45aSu01RxTZeeL4ld9BtWyCJ+5qGeeR6mMkzvzII4hQsD7frOobP4tRcsHUlhQFXFMBwHjn0b/FcpuYw==","signatures":[{"sig":"MEUCID4d3DchBoxjns8lZuQiGFc3OKyJsYHqgHURoXs/2YZ3AiEA2dXADGEA3c9HUmjwC7v2ggtdYXeQUHdp+noG970Rggg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC+kACRA9TVsSAnZWagAATDAP/0A0mRbhntfDFv5dSLFy\n8k6/TN8WlbotfQWJv+yAoih/58GRr+rF+D2q8m0DV+LsqBnSrApHoodk04WR\nqK0fB/DgUqDtHp5MVWuqYTTHElKAJXLXS/bWJv8Kudz5zyddrsx8Vp8RnFEn\n8VEGHA+qP0xZBegn4upfRHCR7ybPkOKYoPGPrgQgAbwK6THyD7pP3qSB6oFM\nBVf5+KB5azdUE/uzKOJHJWebS5tHI/lOS71sKgoMaWT60hq7V08KQVuWQQvp\nj8MahUTJKgUxlZOUGhpeAO72LnrO51Zo2trhIoOfoSfaaKK+meP76HKXMqQh\nqDuzJPMcZVLSlH8+ZC2viVE5qLtYdSQ1gDGBwK5qzjnPYumogppG0PPmgrFJ\nvBvvtgkix/GLtHVFNDPOKfHrMfbXVofQ0r9gitFESaZvNrF70TBepN+GnSI2\naxa9WdAipEAKTgDU/Lyiu3qI6jzzR7R1GxqMqOwNjk48sPvyRqFxI4+8eKKA\nPEAq/F/kBu8x6zMRQGonEXikAW4avg1byRumYEsuFWDU1J02ac+GyvrUu84T\nHMRZhk90BmNAAxuGt9q2uxuG7FUbyDathcDXMGcAEf5j9HiAtnoGrbq/OFGC\n/Q9Wqo8z2ix4gx5HwA3sntug2uSgH96IpHXKkfVL++cHzZt7znt4dGa9/1Ab\nsv+s\r\n=hhdp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.3.1-beta.1_1628170496648_0.5073523961213184","host":"s3://npm-registry-packages"}},"3.4.0":{"name":"@ngneat/hot-toast","version":"3.4.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.4.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"e9710fcf7fd19b944672d6c6c45c6d4c94b8608f","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.4.0.tgz","fileCount":62,"integrity":"sha512-Uh9gYlk9g/90MjKxeqK2wRSg5kO84GIamgPhyNpkcmPWL/xIVWCiTR9eQBoK3ItFn/F8TlZOgYoC3CnlBmppww==","signatures":[{"sig":"MEQCIErPhNVQCirOsBq5lgfbNAtdXZOyw5f3E7jWiGwJ/LSqAiBQr99FOIZ7anSdRHJGtMPfIX2lUwaVRPA2cjI3sI0bgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":582491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDmycCRA9TVsSAnZWagAA3ZYP/1go5IC5sJleeg833OGO\nQJi2Oj0Gdk6KsphAQcUQvPr30fTtRz0FttqsoaeSFXgqRfyvKF0RKl/3EFJz\n3SKGOZRDccdc6ziqakvn0fwmQ38wtk1qtEyF6r0BOt3O9TasQBNUw0wD8f/U\ndzJXxSmE/mmELa53IfU7IVjNESUi6OP6Xh573bZ+FISy3RN4Hosu/miPUqol\ngu8MRhjlHGYzNo1JH60IktsbqgV0ZS7WQBoRE/XdjTXV/p0Cevsg5Kzk96wD\n+LBL+oLvMbUcDrwneZXaP3tw56r/cjkLUmtXyNuhnLQEbvN3wkikRlhqxRIS\nyNNgp434JzaaEwVYFIbua4iWirh0NQCsz0ScMTzGGZjV1LpOLbNryo0F0iFR\n0kAl7WyVVHuFpRhNDd4JZjdFbzWlf3TFfMrYdIYopxs2ypurJmugjeH4MvuR\ndC0MjyyQ/zii+KN1XQc2CJqY5oOzgWKqSkRQ0u/BaEmnhEFIDvYeJVyhqfEW\nqifvxMfLWuQwnSjaOtkfQg8fVTHiUPh6hf84EozRrkuKeE6Zpe5n+oj3xNBL\nBFzHuU5X1J89C7s8yLp8R4HFngH538xh1xBDJav6Vt2AESkkUlfxg6PCjQhj\n3DKBZ5ECvx31purQDokvfCNU6Fv5KaemQg4WBss3NOfwNnihCTT8lpMeupeE\nNHLb\r\n=mVGj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.4.0_1628335260651_0.21685225818530296","host":"s3://npm-registry-packages"}},"3.3.1-beta.2":{"name":"@ngneat/hot-toast","version":"3.3.1-beta.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.3.1-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"8459bd52059ebdd88d6eb13182b599c033e67040","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.3.1-beta.2.tgz","fileCount":62,"integrity":"sha512-O94VR0YErirmcNHDHLxBuci9dlsj7tmshVNd95F5h+Cg+Zj9U+wgsRhVVeYn7mHJPBIRxOS6JNyAjK/FjvwyyQ==","signatures":[{"sig":"MEQCIAqMvFe/JWCtq6j3pH+30X+l0K6W5MU2c0fJZ8qFsTIRAiBqvHvULtPtO4j+np2SvlvrUIy2KkNSGUX6h8xhGnnRWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":573936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE0YVCRA9TVsSAnZWagAAkAsP/0jXMbKiYkWvgyK8/roO\nYt7WfaZFwhf2h6UcfJ/+vxzKtyzySLll6ZZpFG7H4YxjKw+m+BsSWhXvm8m/\nS9TBigjTb6aWyM0A0Fzb32H6GA5XS8xQ4j91u2l0jvr/V6tS73wIGLQ0QhI8\nv241vyWnjKIpuAzXeEdHl3UHC/opJDiRAOM7a+U/xYzRPUTtj/Pxy2XDcl0n\n1nO4QsgpC8xSwnTrMy+Pp//iReQpLlHA4abPdN29uFX9Es2kN8NvdNuQ3IvF\nyiX27UPgcmt8PfLwYO+h17rW7PNNHui4xjv0Q4txOBrq7LtHSrzKOQkdigh5\nl95yEpET2PYZb7m70Yh9mR/HEcFQ0jT0rWb46rtjwW1YfzOv1/Xp0vWw8wZ5\nON1KwI2kVJRJ4XD513Eq18/7k5lqFPYg3av0s9lB0cS1BL0JH9aIk4DA9cbI\n23c6IHaR8SVjo9IfoHbGQym3pxEWCJAy1T5ScMxRRBSyl2u7uI0EmSb2SVU0\nruzVjlt4wFOZA9cj8S/5A8F3mGitTm3teVoiSDnTlN3C2+8J1LjAeP513/ns\n130C0TkU3a5G7O5F+i1HbsEgSR+4WJ2uKVoAILri5KRDqj1ldtZoOPFcrnZU\nKKamzJQIkKuizeKCYVZmseyaynz9HduK6n3eaUoEPQY+zqzohzpzsiRPdRWg\nVa+G\r\n=G0Th\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.3.1-beta.2_1628653077216_0.9358092177263972","host":"s3://npm-registry-packages"}},"3.3.1-beta.3":{"name":"@ngneat/hot-toast","version":"3.3.1-beta.3","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.3.1-beta.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"67a405101488006ece8a096e9cfb3aab26391129","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.3.1-beta.3.tgz","fileCount":62,"integrity":"sha512-LJdgpy9l5V3hfbeoAMo+IEl0XtotnapJIpzR8wAXMlH0FgNQPUlSKUd8SKDgo0ttyG+8AyUxYyGinNY0o/4fbA==","signatures":[{"sig":"MEQCIHo9rRrW8eK3PyVXQAxIK1aKUd1KlYAZI7g0be+NKCKLAiAgp9rwPJf7lueg8JGSuJaD3zRBVx1bxGZHTMlk7vHciw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":574886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE0uvCRA9TVsSAnZWagAAqEEQAJU0NpIQLSJADFkSszOs\nn+kLb/+yBfeleYEWtvCud8j146wNiS+nRI7os6yLkl4qhscoOhLaBxNIL+Pj\nX3Pjt0KurofTWd0JxNTwcXF8PvyM7IbCJ2mOBsbhScGkOhTrvIHBVOJ0Fa36\nJ+DwE8xhpTLkWvzciQWpUsRMtpVegPq8+AYSch7VGL+UDJzvq3nFiVkEAvU3\nEW2qaW4FiAgu7q5MSG/PawcKz/jg0CYhePvSq2t9F17wiR8CyrG5YVetCOTX\npO9ayvkC+79pZ0y2+fbWOVir3q/hE+embRoibLb+araBtiNMIc+vNVXvtOP4\n21BXG+SLmoV/3qeGaGSjjqIcGnvVJJ1bWC0VlFMijkorPd8V/8lQbh8xtHA2\n1+s/Zqtj/b4ihc3nERhDFe+Lhjlc+L7hAI47S4jJKf2kUBuftIxmDlahk0L6\n69+LPa7KLtuPkKbzobwTebw088LNoGQ3WEUbHPkoiE6bQK8JeSrLJHCX7uHK\nFWDCaBzw/8p1UuueicHYgfkQchAjjcas18g0c7DrneJ5lC6lKbYYAY8Mwv7V\nv1zArv/lcwY3/X2oyEqHOEA1bBzSzCenpOdvv+IT3RHzGMtqj02V3rs4Voum\n5KEOdaO6q5c+oKWlk/Ctku0Kp6/dupNPf4VE6TLsxukm6AFDj9v4j9/kFsgK\nGTyw\r\n=bltd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 8.2.14 < 13","@angular/common":">= 8.2.14 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.3.1-beta.3_1628654510868_0.1819994052609486","host":"s3://npm-registry-packages"}},"3.4.1":{"name":"@ngneat/hot-toast","version":"3.4.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.4.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"636a40708b624f6f6e790657fee9611798289b39","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.4.1.tgz","fileCount":62,"integrity":"sha512-r7siXPOrqzWY2F8bL2nHyDkIY2w0q9/QpZHsWzZhYWlbunmA4eocJIxKzNzqsXFbF9cI8SEACjqSp19bX5ZHvw==","signatures":[{"sig":"MEQCIFNuFSn8DCQS4KNxtMPtjp/rRsOsgBe5a02DSxvbvlQHAiA/CZKoudvh2y6w1uwHmYa1z0erlDW95KnjF1boKU/EGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":582835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE2VSCRA9TVsSAnZWagAApdkP/iTaRTWIkRWo07p+KpXG\ng1Z/sxeubzD2s/4d8VzqPKy3PhKokAwrXGhv+ZuOmvajyOxc1+PbFpc4rifH\nYrprUy0e8MDKuGkdDufGLEuH4ug8enr5E3/9pGL3NoLaJEwZK+fAZ4MVFXOM\naiSysnGGGHEMv46U5vmzlKKvYLbqQR2I2f9qN/ngajm0NJ1YBZEpSep10161\nNWAuaW0Qa0R1gEopQ5QynTStj/MpwZKj/DhLbiYFx5HbMS4fPaKf4LP29ybP\nCL9lJ1f4ZqRSpdmAchEucfgxIUCfNa+cfO1hqrTXrjbzYmM66r4HTir8smW9\nlrSj6ztLYEi3Z6IWezzoaw23d6ZQvpU1K9/Pe/UFXFkPtHqaIXZOi5/JKUTJ\nDpfOtQPYmLwvu9rN3xOOWqX7t0j+PRcS5uGbUP8dRnnEzr5tQEnyoy9qFsN6\nyhFckYJDATtT96MEAHdlJ8uM4hA+L8e3fQdrtfBuiAVBEyFZ7bx+uyHXw77e\nF05QBG6eQvG4NIFFROpe9/prlBeLxN2+mg95CwG0StyDmpWxDFDaKV8NqEe9\nemk/X5t+3zMyOI2en8dfE/AwlfWM+f19LCyIgYXeo/mRBlWZY7hw2b7tJoQs\njBPHi3GH79eTgpXzzFSNkmlJ4KYiKVTAUG/hQ1m1RtkvWzJO7KZu3N/6qDRx\nXsMm\r\n=/d9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 9.1.13 < 13","@angular/common":">= 9.1.13 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.4.1_1628661074697_0.15711940372654998","host":"s3://npm-registry-packages"}},"3.4.2":{"name":"@ngneat/hot-toast","version":"3.4.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.4.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"d2ddee386ebc38489ffa458d9cc702f247722a1b","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.4.2.tgz","fileCount":62,"integrity":"sha512-ZnriM6bzqflVpNivnsknQIMxOCcx4WR2Y1Ypt7G0Eok1IoLR4z02+bn1p5kJGd1vGGYY0MGAX5pdbtR6LXZ+Xg==","signatures":[{"sig":"MEYCIQDQCWFVl0BHoYaZqY6Fjd9aSq48biVs1O3OYOkl1fCIuQIhAKQbhRYmprEw3z9AAqJ9ka6rheef/9eJEDEfzYN6PGdK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":593055},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 9.1.13 < 13","@angular/common":">= 9.1.13 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.4.2_1635146274133_0.4072748388985312","host":"s3://npm-registry-packages"}},"3.4.3-beta.1":{"name":"@ngneat/hot-toast","version":"3.4.3-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.4.3-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"2e0a197d446e68b9291a959ecb8fab9ab67baefe","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.4.3-beta.1.tgz","fileCount":62,"integrity":"sha512-7m5JOMJi2F5tqwWVqNNZzu6KPYMQaNZiTDnWQjtuwsFOYFPuFGdy6+msg4jaUfmIhsYOhjD2vp8YYppR/m2bqw==","signatures":[{"sig":"MEUCIQDCFzmyGp+PyPCFxucndV6tImt9VF0WRuiVitbMLcpw8AIgCsJZybellwGtUeF3yCRVz1iOpfymjZuS4Fwc0MTI1Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":594374},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings.pipe(\n this.toast.observe(\n {\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n }\n )\n ).subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false\n })],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
*[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)* | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
*[Example](https://ngneat.github.io/hot-toast/#positions)* | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
*[Example](https://ngneat.github.io/hot-toast/#dismissible)* | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
*[Example](https://ngneat.github.io/hot-toast/#snackbar)* | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
*[Example](https://ngneat.github.io/hot-toast/#persistent)* | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
*[Example](https://ngneat.github.io/hot-toast/#emoji)* | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
*[Example](https://ngneat.github.io/hot-toast/#themed)* | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
*Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)* | No |\n| injector | `Injector` | Allows you to pass injector for your component.
*[Example](https://ngneat.github.io/hot-toast/#injector)* | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦		\"\"/
Gili Yaniv
💻		\"\"/
Artur Androsovych
🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 9.1.13 < 13","@angular/common":">= 9.1.13 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.4.3-beta.1_1636613690126_0.8707789806226041","host":"s3://npm-registry-packages"}},"3.4.3":{"name":"@ngneat/hot-toast","version":"3.4.3","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@3.4.3","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"4f1cdcc5abb138718697476ce757ec0417a62ea0","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-3.4.3.tgz","fileCount":62,"integrity":"sha512-VZjk+bGqEpKTi1R0gPuYTDeezVLjqH1g1Ks2EQ3E9UeTVg1lx1RGG0oX1P8uPj/rMBmxPOeE73SUyQNOfcVimw==","signatures":[{"sig":"MEUCIQCeSFC3L5y0lP1mW9rAdTpBlZQNSku0a+uJYLpd/HDxUwIgcfAE8c4Tb8Rak6heGsFgn2SVtpDNUbCsy0s1RnWGgD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":594367},"main":"bundles/ngneat-hot-toast.umd.js","es2015":"fesm2015/ngneat-hot-toast.js","module":"fesm2015/ngneat-hot-toast.js","ng-add":{"save":true},"esm2015":"esm2015/ngneat-hot-toast.js","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.js","metadata":"ngneat-hot-toast.metadata.json","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"6.14.11","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 9.1.13 < 13","@angular/common":">= 9.1.13 < 13","@ngneat/overview":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_3.4.3_1636614141407_0.9306743388724217","host":"s3://npm-registry-packages"}},"4.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"4.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"375766dc623b3dc0ce5448b8555f4ae174919a1d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.0.0-beta.1.tgz","fileCount":59,"integrity":"sha512-ISgEWe9gtx4ufpupLuGw9bAieXHpIv7AYXv1hJ0V6e2dzvwvI//EY1XLIMKVmoYz7ZxMPIptoDc0yh8h1z4YzQ==","signatures":[{"sig":"MEYCIQD+rCs9ylJVEV+yS9lEYIX2/tfqCanx+Jn/PKuYN5MvxgIhANeYiQGtF6lj4ZjvAw1QJOehbYdoL+eDArdTv9E8thWA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmy3VCRA9TVsSAnZWagAArDYP/i9sV5/5fYhJ7eRcvx1U\n+/ConSUr7iTSdyGw1/SbEKr7wUu88PK41LmRCZ4bpJSLByw6M1Rgn5qCUdWw\np2mte9DgFkVuEY9UfqPTNSqpAe8FjF8XJ8EWd1DPQ8ZKVl9iV1lq8n5ZEPTz\nkqXenx/HXu4Dtru3xMuHNFq0ZfC5QoDvJ9Na7OW1bkJbfu/D6c6UbTcJ4Rlf\n9/kcmdC7u/FPUwzd66vIjlUwEHHdaoLmXZsbHdsfVV9t1KMAvRKjLHdWOvOr\nQBd/u42Q6odzgoByQ1Myx1JZGbwO81TBdp0SLPe5i+E4Fk1u1hZtV1MQgQMC\nF/1y0C9lXrHqoDZdnBjFg3jcjvHYbDPypJxKj4eu/nNldj2CviAiUjKOyd1R\nECNWdH7xttiynkyhpUrtLUj7SbgTwcE5Bc+hTGckaC/CVaqtSajq5ncWroHD\n5Pil+p/A32vaRhQX38tLxAGkwHiRvHRgknaWW2jEXqvWLLtZ1R+kVd0POo4M\nl6tCBDOVCPMoJbowOP0OcRo2eod6TRbVC0BQUUKJkCJDKW6y5NKw+uh2VgPW\nXDq4k7t150n5ON8RnMtu8anSEkaKiPxpzRlnXwSFY6EfLU4YpANYg9OLy+H9\nqTX+q0ac4IirwuQthAH8V0b9/9AHI0W0BZGUAGA6MO4jO2KYHCTap3q7rFuH\nYN3t\r\n=QcMK\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦		\"\"/
Gili Yaniv
💻		\"\"/
Artur Androsovych
🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"fd298e9aa586a6823665e8aa60fdca5d375afb4a","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.0.0-beta.1_1637559765223_0.29522601087152966","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@ngneat/hot-toast","version":"4.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"35eae1db6cd0f848e6f9ca480ebeb5208cbee75c","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.0.0.tgz","fileCount":59,"integrity":"sha512-J8CwQdav04XEOt+BdAD5ylMRJ8dlae6zNxru8sV8SkVhnjrLf6S9PXtCwlXcoz8FFtrtArkNNBdqK2fcK0Kn+Q==","signatures":[{"sig":"MEUCIQDSI6C1iOGLeM+Pqlm3WQaoKHELr9uczFeE8fnuBmXQ7wIgYKjVOHwals4Hzblm5CbIAwNrgIkHN2G7QbQESywsNeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhoHoJCRA9TVsSAnZWagAAOUgP/35kXIg90gMYAQhO79cE\n5mS5V5ZfZgDuY9HeMqm8aT8TnFW3NM+dFaczfF6N43B+FR7Kmf24pYO2ryfR\nVUHqNo3bfrZKgCpfoua3MkcgCgIXQjdf13V+RGG+oSpBP5bp2Kc2EvMTued/\nreJvwZUmw7UtRuE6oAut0SCVPiGMxHt2Bl12w16ru90GZhfQI92C14202rwa\nQCZ+ydOcheXMIrNdJdirff3y0WK/bYWDp60f4cNVeiUf+20hoQGb8x5F07cb\nJorCDERPRUCpsrL8I12bQzPkTVYNTkufFzCWwBlFuhxW/ahpWEjylDkC+JtW\nKgV9wD84y4kxBepWQ8dKN2JNXnwMznfEjmnuArB0yeoIGw76euQzPPmuRQYg\nv685r6PJ9Ha79dYw+vbNubDTR/v7VCzQijdkvVP+uvt0a7u/u0jEBGTcdv19\n7r6LdQ44pqGqBo1VzSjcEm4RuPaUudkeIO3udZFfyr2Z/qtFS1dM301Vx+oC\njFaZIoxJVo4WeoMKjCkMVvRjLy78EPo1hCqb30E4UcWvnlxGYsspgP3j4cNI\nHIkd4vlyr7qNrR+vEn5mc2/PYrE+5q9of9Nj7p38SGbPJwTnD1KXheGT8SLi\nFIUO3tbuR2h63w0l/ZJ7al1SzVSW81rxvx6h5VD3Efxo/LHhql5Hh10oBpj0\ntRFo\r\n=vFnO\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"de615d4d5d104fae1d6eebf5786e0b6a798abd34","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.0.0_1637906950958_0.057058696975054835","host":"s3://npm-registry-packages"}},"4.0.1-beta.1":{"name":"@ngneat/hot-toast","version":"4.0.1-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.0.1-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"3a664a42c135f8a711d05be58b5b30739a82fd74","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.0.1-beta.1.tgz","fileCount":59,"integrity":"sha512-jVJtsFo3Y4jsJQXt0uqIYKjftrZXD1R4bUW0SdX0G8P2qvtr/Ep/Tbuexz/YHT7c6HKhIN/VfRhaNv7JV+Xdaw==","signatures":[{"sig":"MEUCIQCdN071JSy4G/PM4EYX48PP0Xi/SV6QYkhF0WF458N9EwIgP8wR5FdwXei3bItbGyrdT4Fdi1MiH067dwK4UJj6FKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuHNgCRA9TVsSAnZWagAAki4P/3ctjVZkjJDIzZtzxPFo\nUIyuoYMq0RPJkppNJ/pxkjBcuZp1Agd6FeEbxK3HZzGdESYeTMeCDANv6o47\nc9d5VkIPp+TbVMmikzSpdgpBNPeX+Lt7/h0ZZAGIGnhajC+KKz7GWWVWJPbI\n3fU9kUtNLQ7Jy2BULS7ymg0qIbxoyYL8XZNHuNFXlUA/j0H5gPtDibzj2d5E\nZWcFwVUsgr+Ypt0Z7bBtCbrrt+43/Vg2HZkheFB86lImwo+vBuDAQ3ie7h2n\nfhspkzD/2G1tVk4PVgSfulF1cYuZvJnGQq6CE9GvcPP3PEDQoQN3lADBUb6V\nyTaPRKqI9HoVHKxHC35ToLHlb5+nG5yrd/kzRhv8jKRZbzTOQ+cjiBVOQRqN\ncfXkOriVDKlzXWWgBXX8N2ltT/MdsrUzeyRYOK9eVTCtOqYMOcnvYp+ssAwV\nOS8yOpmffApoNY2Y03CfHx8ian2MYoauUBJzFhCsnHBFJJYhZLjihE+eUa/k\nATQnDOlSjjSV1xgp1Ijj9wCQpDQlvD21dZviRvCN3r4v7oovcth2JnJqkzUr\nEkwMnoXhNoKluIe4fhasc85rN6w1OojygF57Lenyu54RgiP07mIy1bKya7EE\nteUz6Wg4jrXJiamI5DaqyBqRvs4kTDS5s6Wdb16N0YzoH0NcV7OOJlSOUZpB\n0t+B\r\n=WtC5\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast\n\n# For Angular version >=13\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦		\"\"/
Gili Yaniv
💻		\"\"/
Artur Androsovych
🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"201c13ada5b82802dc7fa2279d26d33674eb5d3d","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.0.1-beta.1_1639478112111_0.9581640329937875","host":"s3://npm-registry-packages"}},"4.0.1":{"name":"@ngneat/hot-toast","version":"4.0.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"8de6a6ff74d138d83c15db5ebe30374646f671b3","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.0.1.tgz","fileCount":59,"integrity":"sha512-IMd/MyEKIGZZUuw/lZdwF/6+It8nFKRREgRDcNlwRoPEaTb4yPez8/s1kfRP2semiZjZg6K06fVrIzk5Q0nidQ==","signatures":[{"sig":"MEYCIQCnRsgk3lmN135BmEPU9J8saupiYTi7JhjIDloLaq7TdgIhAKEvR8ngm2Me4DG0thmeTjNv3MJ6bZpNQLqTxE5TQxGM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuKb4CRA9TVsSAnZWagAAEKcP/2pCS5IgZeyNseEkcfH7\n/iXjYxSqLVQ9xFDxc+FZLd7UkPAm8tQeA+6tyH2H8b8nCcLLuh0E+bGmov+c\nns+YftUjGClZHcv6eA8ZLNx9u3V36mnVFMo6Gi8ADiBYPdnzWygsnyB0bFhh\ng4nCrpXmnOmJ7wY92HwRZDHVp3tz8gg/fUQv9NzoFSVRE49bc7Qq2ozi48lf\nBiDmbPguF2UikN+t+Gwp3XOb6Xmu8BLkjsl6t21b2rie66vhAYfPm1hJ/OVg\n3+zdZG7Ci930yITNZL+uOsU+hzaG/TvFljG69zsM94LADy0QrELGCzSHP+M1\nWMMCHF+ytVJmeVox0qi25QILe3ujiLufQEcgQmhdPIz9jvnJrmFOcr1N5sOS\nhlBoWV4xx6NP5r10Saw65zG2daLFB06JQWVR+o7cbY4O/JjNH+A8T4omAw+7\nXZuyuB4nXvVJmlrfXK8sJqY9RS5by1dayp7FVxoTJZN4RRrSgi10+YbkGv/q\n5pn/Fhw/uWqgsSAvx6ogdVwXCJ7Ll3hw38KTB8I0PJE/7tInPx/6oL8UyWpF\nXhkxxBi02d3BmOc4h2EAPzd/BatJ5oVphT/Zu8Rfu61lZJDeLSnX7d5eXEPx\ntbUPuQi2fhqwdSHRLomyRtiSVy8hs8ueqEwZCC6nsDIYb1PRCUwxImWZUR66\nyeuL\r\n=39DY\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ec901bada3c0f45f90d29cbab2092b849d09949c","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.0.1_1639491320485_0.4992772040436313","host":"s3://npm-registry-packages"}},"4.1.0-beta.1":{"name":"@ngneat/hot-toast","version":"4.1.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.1.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"f4a6897fe134931f533ba0b8385784ce043f2a29","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.1.0-beta.1.tgz","fileCount":59,"integrity":"sha512-arXx7JZkmnceIZcqh9nCXfNPgotChKi2iVVnufQcvOAlv5BpRBCFm0H0ovL+UJ/bk5WkbwuT9R950DQh8AVbcg==","signatures":[{"sig":"MEUCIQCIBfGI0O4OMjOfIfQY3YRFXv4M4gHq6ZYwTHo2Y7yq0gIgIogM4fgbE/bcNlvqP5PlYHW++P7M6RYabuFQPn3ZtxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyVn0CRA9TVsSAnZWagAAqTQQAJWkinT50GhA9gmskpXl\n90cgUmH5fczH6Yi+Ug3Z1wUlUGWvGXq+z+ZRKU3+Sa5eCj/+Gll+v6E4c7IY\n8JQG7ck/rmfXZRKQRvlCj52Btka3sf1DA24yWLXk4h+YWNFmyDPRjIq2L4qW\ndMJxpjAhoI8FUN0gRhbaz3AQYI4kfdeY4RWP1vnXaC4NLTL+e4X4jjzVV5VL\nGb9Ek32223B+ukMCY445gR2bBDBkKFa4+z7f2aoKjR+s3HGnL2jpV8SLHIn0\n+xPCzT50E9BmkrvxC7ftVl6I3mUfudk+i50UgbXu195uR5wMB1Q9sJ7tRlYh\n9X6ej8jLX7Up1w9o5JAUAakq+f8qaxbwSfB3O/ZSzclefCeC3Inf6IeapI8W\nd5+G0jw9+oZn9hUCzeSCfgBOha6CLNP7a6+jpazJoPZzfriB0sYMpiot7iGV\nfgctzhOELX07eYegvD4ga4kZwxY+RK6OrKqWAaLPLpVKaTjMsy3gyZeD9KNf\ntzsNhlqP+CxbExm9oxjrtAa1MM1JsG8QKOe2K0J9FpTT+rTt1svuj4pZZwAq\nxW5UJExplMf1DqpLK443X6M5ba1imhIh35S3EDjSt7k96oad2covF75zPf0j\nNJjDe90ksCvNRV9/JZUcWMtM4sqkb/tu7Sbr3YU77C4iCsbwIaG1G7ENSvKD\nSQSd\r\n=MYOo\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >=13\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦		\"\"/
Gili Yaniv
💻		\"\"/
Artur Androsovych
🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"d3a36ec0a45fe8f3d3761057ea01711452d2f598","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.1.0-beta.1_1640585716783_0.5377221286968212","host":"s3://npm-registry-packages"}},"4.1.0":{"name":"@ngneat/hot-toast","version":"4.1.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"8c0cf5be445254678b782e612f4e8840bf2c8974","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.1.0.tgz","fileCount":59,"integrity":"sha512-5QgxYXAGNmg0J10QjHOBu8Go5SZ9WIg5TDFm60ecMK/BUcuaHB7QeVfY/YFUPsw1iXaO3IVb81w9LdqXz2GNsg==","signatures":[{"sig":"MEUCIGm5Hf2VfOHfD2e7dZKuu0BTpAVfK6f+Gv5GOFlfN5UDAiEA29q/2zZYmJMmELJIgu+NPzGg6aSyYNij80qHi/9Ju28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyZyaCRA9TVsSAnZWagAAWr4P/2Qg6jTuuce6Nr30owTm\nx6Y2srZQf9BN5efBaGW+U1hpfrSJ1T2yOBXrPTBQyF0XM7K9GY4JVbNVIhJa\nbXdg8ASD0qJNDOkyhAWquxB+VywrzPoUpG6NNkYuTmjcP+Oh0C8GYB9lYQV1\nUKak3LvpqRM8rDYqf2mVs0VNccuubBKTbNCRma0hCvVnLhKbb0E2LuSOuRsh\n57dBmHUOvgrlPCOcdT71c5IGiCjM9tKlygCxgCSd3xHml/iumM3VJVZZ+s9O\nXijtEsZoYNOUpCTqLTM997ynRSjcFvsvsTCZLtIzzwcHGN3IvokV9niNd9Gg\np4hJJ2gPQwt4SPv24yKuJyfF491epJHIl0UVnAIUk7SXr48lLE3lLI+D1MAV\nFfPZjts6LYI5+Y8lNFao+OubEjpfPzBrUyLzA0FeEResbe+uxWF/gFHYb1OK\nR9cAvzcgdYeS8miwg3Cf4RESeKDOzCmnwmqI62qwOYrocEiIQ7bTRPZUjBcx\npRIPLl2e+BTOHAea/74ICnwEbbmqKASKXBnr0YKNAGN8bwtGSW8nxvwTkosU\nVv06Mf5nJWP6YHnw/VX9emhL8bbVyQCC6zx/r1zgdJyj5xijKoh7Wy/O91e9\nKEoC7R5QZd8d6HLp8tR7LTvpkIzZ0ai5HYGChGgTsfDdc01PoxEH00+rXKi+\nmEqk\r\n=a2Bb\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"292b950e9af6b8c5df7b5cc1be353e11f19fac33","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"12.22.8","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.1.0_1640602778252_0.08782122230018463","host":"s3://npm-registry-packages"}},"5.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"5.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"241897909f7663203385ebe849805c2e83d594be","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.0.0-beta.1.tgz","fileCount":74,"integrity":"sha512-kuLW02fLoDWXVOYBow/BL5JXgN606O85K+msuPLfGpCGGkrX7fSD/SfLWtwb8HcTxHKkHF47FE+GMj+5knWyuw==","signatures":[{"sig":"MEUCIQCqnI77ygoRoGACI0OIJ6hnE1I8yhiOoRrqB6ZPkhR2oQIgbO7ZiTeaWF3NxdYft+3u5rF5bfDiLaOm7+txYKDDagE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt8DkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOKBAAghy4w6LQywnOnLs0IQmreEcA5xwxCIk3BqvgFYvJtE1wINIj\r\nEpwsvvvX7Idj/+Vza3ZBcYYm8bhyvJFz0g3GvKTSqnwJeAxQoH3qKEqzCdSs\r\nUj+gH5Nj0QZ2JG1uECNTJjmFgUtBeYNw0Dv7sYOQzu3SpRctbxKd6uFHMDsF\r\n34l+y4QIWcyUJmkLDJVXwJhYUms9r5gsE7Jgm9E6Xm6Nrf9ELJbAU4A8ki/N\r\nU+LqFvFWOJhGy3m3CaV+5oLye1VURXgzeW6gigYl2kaveqVz1HCR2JRn3Tho\r\njPxxyoCqmVa3hrCoXY0Nw+GSfHnG9n6agE08lI9EUVwiNzPsRH9ydZ1C9tWE\r\nxD5NbtnDNBpGZdUylql8P74dXwcR0FaANuERCHroS7wOL/j98il/s7L4yMZP\r\n0lgELWResAE72i/2+fWQt9RI8byVR4/DaQ4E5sM8Ep+7b/6cskSpJ1wz2y3+\r\nORm7+LwDZIQKts84HoAv5w5mehEYKjr5xhKY9D8loQdQXdQEjnWILj+5jUIW\r\nxx4I/XskPM72SlN2NRQFoj7oxPuoSen7a0gBWicog5UUp5u0/GDNdijHEN8E\r\nxKxD1cZsX7x8+spPqgfzlKrZVgP8ZtZE83ZvBpv4LXpdbs+biU0s2ZLRmb6p\r\na6TbA0/SBJZzRBKUBMPaw2+wMuyS0+ChKAU=\r\n=JLTa\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >=13\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"17bf1429c4e4666545f6bd3e61770fb8309e2c27","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.0.0-beta.1_1672986852644_0.637960721244329","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@ngneat/hot-toast","version":"5.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"92317a560122593de9ff662cc9959cbef2463331","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.0.0.tgz","fileCount":74,"integrity":"sha512-6JJP2Jeh5grHiItksF+WeZGrnCgj79AJTQyNrkkpwVuYmXvvKrVZfn227TRS1O3G+qFOfZk9qN9T0OZeQO013Q==","signatures":[{"sig":"MEQCICgP7wiI1FYvuOxpTixm/w0JYPB2BfjGeiuHVI2J+t7KAiB+NYI/dp9i7L1Q+HO12K+M7N/pD11W5vQlN+OA4aRyHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt/w4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Ug/8DuxajUnNA3VC/XN5d7Bx9rPbv5M4UV8bvp6+yDp55GDsi6DN\r\nuY3pVsQSCTcPdZI/LTVFTdlllE6Lun7CM1eikmA+4/kqdZuz+pUHhONBHXBg\r\n8BHdpv7NpMSzlMH6axuAznlvnhKhauL5jxfLeCfhrsvnV44mjjJVj30ja+fS\r\nOzXVMHDufVlrwGHgHQv+DUnwcN/eZqPN7XC55LeybNygb4oG3lXjxtJpkTh/\r\nuCiFaM9/0kEWbywISh9xxU54fuPXOZES2mxkCKL+4gWPalTX7P44UEQPOHoO\r\noyN+8sUKBoTTHA8LGqIOJywx7LhqzbleJrTkV1Ti8FgWXVBEOb4dVFik5SsB\r\nxtzqXqdLgOAzGuvI7DzBFbOVuFQli5ilrK15hpwFqzhYL5D3flp8s5TvIsHS\r\nQVjceWNZctse5UQ9XqWXR3ttlP3YNsF3jhUQ303Lza/SuTNnTmyaeGxmayNX\r\nJZ2q8BApPybTYyBKqbzIK9nln3z9qUZmEFVraZPTlv7NYoHRUhzCdRXLAREm\r\nXCShmhEu5QFnMUM2oSaVhFuMuyLnN/wd1s2fa4yhH6Vpm9wHtdoIapH6gS7y\r\nK/i7RXdTQRzfk8tf3QSIlwYXIHd8fwAt9eZeuXA9TeJ9GHUyhcWkdhcH+60/\r\nK4w0wzElrnITSNyna23mFOFYb8jneWmeBag=\r\n=qhNH\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"c510fe89958317e5c63a9a800c9c56e4e6b76b4b","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.12.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.0.0_1673002040539_0.06339914599081808","host":"s3://npm-registry-packages"}},"5.0.1":{"name":"@ngneat/hot-toast","version":"5.0.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"1fcdacf7800e7abccc1d08168f089634530f6ce4","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.0.1.tgz","fileCount":74,"integrity":"sha512-cym0rm7++O29dzhsz9q9tS/kppwLjw4gduJeRLT8Yw9Y3rMHVnNeVypbag8uy/PnyPzMmSA4DEpRXde+7iRcvA==","signatures":[{"sig":"MEQCIGVSx0O92hCefJNeo043k8FBcLFUK+gNi8qjcvarzPsvAiAVoGgPmk1ZhmXZtlsKSwMKs2UB2QfOd/LHT46OpHm8/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjy4z/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoosA/8C4b9w2IAV11iSt060HEOwv8VVbyfm15ez4W7zzsKg97PvDsm\r\nHidtRgSO7Dx4wA9b9stEzZxUdKPhikj8NbSJ4mbHwP/bCHou6WfTjnXnpC43\r\nT2iFqNSNbfR4FGR3sOPJ/d0HtWp4H9RFiejySeWQ/08IKUogD/X6ZcVARkVi\r\np/UB6fLrzYdtyINuw73Y8Gb/Ul830jO9ghIZ+jYxmFZJm8eusYnqtwYYShi4\r\naSg+c/F/hhsxyD6a/lVfwCTT+dBSNBcRkj15tbfIkuA15OIyH914JZ+Fva/t\r\nmnbrMyWlBVLU+KAlDlHMaXCARhZdsDx7VlkoFvBRcJggI3hEQDM0cIftt4Pf\r\nxSEP3CeBfxuquHH4xyoFHez1z5i6WwZY0e+8WCR1c9zFmay0/qi7VPXEmX/A\r\nvW76+6S0lnqt1dhYZVdgwksR86Ext5NkH2sArTDWomjHpNumaq8TiAXwCzOI\r\nWn+yFgjJIyh1Aco0mY//v3F79v69FQ5pCWtuzHiYRmmrGd04S+ZbJMwWy4Aq\r\nMVk7mLjtH0EYlNjS6DD2eOswkX1PG6MmAsWHbtVlFDhXqIWIhIbp9EW5YFwm\r\n8S9Xru4RpNCx8v6UuasQwva2isOVd1NVn2sO+MbdYWi3KR462JKnbEwTYbFE\r\nUOHycsxqag34FMqN2ZAs6Q/Mw2Yz/WPsxAU=\r\n=Fp+Z\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"9de5d3178e0fdcbeb4c70d6fc4cdbf86e4394e62","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.13.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.0.1_1674284286981_0.4777833806981875","host":"s3://npm-registry-packages"}},"5.0.2-beta.1":{"name":"@ngneat/hot-toast","version":"5.0.2-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.0.2-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"9ba2558e9f2757f579fb2fecd4dd8549d2b9e63e","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.0.2-beta.1.tgz","fileCount":74,"integrity":"sha512-sEsHZP9Ecj+Al5MEB4bp1dkmvD1QYmWIL+Z3rWyfUpm15NVu0B2aGp/mguUEulsMS5hFOBIsTYpdwfnsdKhSYA==","signatures":[{"sig":"MEUCIQDtcVQ5TqQbwD0ioY5pfD/zwKHwoTzITOWz2bS3LS/ROwIgQgSlYFFN/qQ9opmgnnJzgYFy+inJLdvK6D1oF2A7rBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489618},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f6b9bcd4945e91d38610753490d8a256122b2746","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.0.2-beta.1_1687598572393_0.15195268154974317","host":"s3://npm-registry-packages"}},"5.0.2":{"name":"@ngneat/hot-toast","version":"5.0.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"71ae481eaae71ee4555269d7c16dfd6bb6bee205","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.0.2.tgz","fileCount":74,"integrity":"sha512-gtPGDq9o++0TOTWJT62HSyBpwc6jWnLb+kCo5kwteDefiM2LdLACTONV9fBXK/eWp1NKsHW1FU+2ENrOoq56WQ==","signatures":[{"sig":"MEUCIHElDtxm+xGzhSLZU/yNzwigwyQeaJ8RsjX2qa0drsKrAiEA0zSpi64pxE1zfHT7/zdSatjXw+pQFtsmkbd5p+sIwYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489611},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"24050e2eb4996896efe32331d2f6c8c888a24ddc","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.0.2_1687604913051_0.23525003526115307","host":"s3://npm-registry-packages"}},"4.1.1":{"name":"@ngneat/hot-toast","version":"4.1.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@4.1.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"193d3c8e640219bce5677a9aaed18005ed989698","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-4.1.1.tgz","fileCount":59,"integrity":"sha512-G3doRZG/UFurM1skOPQ4bTjo7XHwsvhs671e9jrNDh6fCgVfRBqT/H5qcWdyCgnQRv7USsaWjYd7wJYWxh8Hlw==","signatures":[{"sig":"MEQCIEXzQ7P7Zr31u1g96mKqrvEbHecO1P6+or6rdNdAx5UbAiBfaFHZ7LhRllBU3/epbCrXP8Z5HC6VcscKwiuUZ5e/rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516071},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >=13\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n
\"\"/
Dharmen Shah
💻 🖋 🎨 📖 💡		\"\"/
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"\"/
Timo Lins
🎨 🤔		\"\"/
Patrick Miller
🚧 📦		\"\"/
Gili Yaniv
💻		\"\"/
Artur Androsovych
🚧
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./ngneat-hot-toast.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"cbc03a531290c8a3621ac62aac8e9f0403c0348f","typings":"ngneat-hot-toast.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"7.24.2","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0 < 15","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_4.1.1_1687606281623_0.7091851633276303","host":"s3://npm-registry-packages"}},"5.1.0-beta.1":{"name":"@ngneat/hot-toast","version":"5.1.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@5.1.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"6c7674abc1282d7226f31a814399e96221b8b241","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-5.1.0-beta.1.tgz","fileCount":74,"integrity":"sha512-n4lZsvK7/tvZTKV5zYB9qJR236cTohsdleZm7I7gN2bHFzQy9CBbBCxm+GXAoW48U5ujNo7L3yLGGZ6SFe5Dag==","signatures":[{"sig":"MEQCIAUwEZJriAYxVUD+t+99Z3vsLgJQ81U1VeMLlt7BRUaRAiBzqZObatZY+gNFLVRLzEAtONCw5u4vCdM1GfbdqECWLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490979},"es2020":"fesm2020/ngneat-hot-toast.mjs","module":"fesm2015/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n```\n\nWhen you install using **npm or yarn**, you will also need to import `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\nThere is also possibility to import `HotToastModule` for child module. You can also set toast options ([`Partial`](#toastconfig)) here which will apply only in scope of that module and it's children:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forChild({\n // config\n })],\n})\nclass LazyLoadedModule {}\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","esm2020":"esm2020/ngneat-hot-toast.mjs","exports":{".":{"node":"./fesm2015/ngneat-hot-toast.mjs","types":"./index.d.ts","es2015":"./fesm2015/ngneat-hot-toast.mjs","es2020":"./fesm2020/ngneat-hot-toast.mjs","default":"./fesm2020/ngneat-hot-toast.mjs","esm2020":"./esm2020/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"df3715829d6a0062b149fb8bd061ff423899557c","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"fesm2015":"fesm2015/ngneat-hot-toast.mjs","fesm2020":"fesm2020/ngneat-hot-toast.mjs","repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=13.0.0","@ngneat/overview":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_5.1.0-beta.1_1693824163818_0.3915643631560559","host":"s3://npm-registry-packages"}},"6.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"6.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"3d9bc0b787d617ee36d9e16f865f5cf988ef0b31","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.0-beta.1.tgz","fileCount":72,"integrity":"sha512-juAOtTmS9glIKm/GFnyk2dnJ9ZyJSrTOFVymH3PxxdfHY0msiEVEFtEChZpCrqJe1qBKoNnGpmzNHeM8K27kNw==","signatures":[{"sig":"MEQCIFtiDbVTcU6KzUUiZxNzRex41ypgprQ206UMq94AgfErAiAwYNiylEBQi0vFuPBmgo2pTTyQOxa/rXf889rks6oqag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375483},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16\nnpm install @ngneat/overview@5.1.0 @ngneat/hot-toast@6\n```\n\n### Module Setup\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2af56420fca04fd294008f50a6cc960c94c03fc2","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.0-beta.1_1695036372114_0.35288258492338476","host":"s3://npm-registry-packages"}},"6.0.0-beta.2":{"name":"@ngneat/hot-toast","version":"6.0.0-beta.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.0-beta.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"18f13431a2b7750e7603b8ef470f2ec9aaf3a18d","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.0-beta.2.tgz","fileCount":72,"integrity":"sha512-ZtLpi7Tn23UscTlvg438BqsJDFcYIeSpVMnZuhmPIAoLVsYLogTl25/A5gvqMtcQEr5bUvvAFQAZe/3EFVda3w==","signatures":[{"sig":"MEUCIERbKtbNT2JeNBF9ULSJlNv+Zg3QZwtcwBjVhJwqQn4UAiEAxQtQscOuOqmDONJH63PJ//Jxo6nycqNlmhQhC3ZFA5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375535},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16\nnpm install @ngneat/overview@5.1.0 @ngneat/hot-toast@6\n```\n\n### Module Setup\n\n> This is taken care with ng add @ngneat/hot-toast\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"d99b0a47f58f19033d6f3311d3f8c0d62fd79a7e","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.0-beta.2_1695037166536_0.5886612012627845","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@ngneat/hot-toast","version":"6.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"9c6e14afb356b8a23ed75466b84be768dfbf4870","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.0.tgz","fileCount":72,"integrity":"sha512-Fnpg/qL6wGa7DCLACCEK5Qj+OoDoYmFykfW1q/Ep5TUAJ6wQh3ex2cqn4LYWtDlFP3KXcNUYFC4yfXg8OOPuMA==","signatures":[{"sig":"MEQCIHoy2AEp2QFJnQfHH5FUNyTHV7X54G8d7LTCdHnf8a+0AiBYywf2TOob5aD4EDZHTCZEA79kKix21pc1wdZz5hAisQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375528},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"29133ae77697f577d4a8ad62f0154dc02e2a0077","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"8.19.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.0_1695037804397_0.7211381705503839","host":"s3://npm-registry-packages"}},"6.0.1-beta.1":{"name":"@ngneat/hot-toast","version":"6.0.1-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.1-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"dd33dfe9407e47c9dee11af74bd47dc809363241","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.1-beta.1.tgz","fileCount":72,"integrity":"sha512-K/2qjzHlkABfkPgh/bqeXpEdmEIcfRJmhOWw+67JmLRYJyfXCXRArKJGLPEO3d1+duWgWPclFYnrIjDKzw2CVg==","signatures":[{"sig":"MEQCIF0RlrkTmUvz11XP2eCpSwDV1TPXsGdKPMIPCEjNnONXAiBWbcSPG0DbWWMzr0Waz2fnQ0aEmMBaHvizn/BrbLEatw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375526},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16\nnpm install @ngneat/overview@5.1.0 @ngneat/hot-toast@6\n```\n\n### Module Setup\n\n> This is taken care with ng add @ngneat/hot-toast\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------ | --------- | ----------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"b09a8d78f156011773095b50a2f6624c2acfc62f","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"9.8.1","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.18.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.1-beta.1_1696929527375_0.004939410740738337","host":"s3://npm-registry-packages"}},"6.0.1":{"name":"@ngneat/hot-toast","version":"6.0.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"381d935c94e4fe03918243d0a7d8af57f1605d43","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.1.tgz","fileCount":72,"integrity":"sha512-a074V0BcqDojKWsd5Tuczd3+ZefUVejzGP6rBWEseTeAsz2JxZYh96G7JwJKQ0sBY+ho8GC9Mn96AJjXmz8u+w==","signatures":[{"sig":"MEYCIQCr55yVlHW9nTmwBiP+Iqe0riIR8goY3r4LxYbKAciXawIhAKI3nQABjHG6brF9M/kDRxYFkgDJErQmViCRpcp5X5kn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":375519},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"ef50d7a2345f5040b3619683acbc75e0b823aa60","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"9.8.1","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.18.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.1_1696932170066_0.9950444919696972","host":"s3://npm-registry-packages"}},"6.0.2":{"name":"@ngneat/hot-toast","version":"6.0.2","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.0.2","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"8c7e4de9a7c864c45a52e1e8e9ff353179d8da0c","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.0.2.tgz","fileCount":72,"integrity":"sha512-tW57o/p2lDy2LzOIKvvajI+r51VEwr7nnIn6Reg/hN/evSlHDmsq8+UHirnB4dgP/xhY55LxOEjJt2tPZUh94A==","signatures":[{"sig":"MEQCIBitn02ybNJsRQCNTowcn0ZUF0Pf6u58/gLuRTanuleIAiB7wmEJl6DWYC9qTUowI4E46J7yekUqMlFs3VhJv2/ICA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":377868},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"01d734f25ab808f29c26d3665debde4d69d6e45c","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"9.8.1","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":"5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.0.2_1701840189767_0.37349627487494397","host":"s3://npm-registry-packages"}},"6.1.0-beta.1":{"name":"@ngneat/hot-toast","version":"6.1.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.1.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"69c6860725f448f22574621d4fae1420c7bd2761","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.1.0-beta.1.tgz","fileCount":72,"integrity":"sha512-+3lTY7vxuLdzYS6WSKSRC0E74iuHKuV0ywNFdY3vSbPamXmWIkVFquxkZCBaxzmX8D6tjk5spwgq6c5zj1pSFw==","signatures":[{"sig":"MEUCIQC5gVviGyezFz2bsCVcLW2SWytxanDy025IUkmTFGwUmQIgTyr6vIjzI2jcbMSq28mxz2dguLEeLuQbB0mrOsCwtdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407893},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16\nnpm install @ngneat/overview@5.1.1 @ngneat/hot-toast@6\n```\n\n### Module Setup\n\n> This is taken care with ng add @ngneat/hot-toast\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------- | --------------------- | ----------------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n| visibleToasts | `number` | Sets the number of toasts visible. 0 will set no limit.
_Default: 5_ |\n| stacking | `\"vertical\"\\|\"depth\"` | Sets Sets the type of stacking
_Default: \"vertical\"_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"68258e10bbb499f847d425a1fdd5b1a80231fd6a","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"10.2.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":"5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.1.0-beta.1_1704435080382_0.25021879674333736","host":"s3://npm-registry-packages"}},"6.1.0":{"name":"@ngneat/hot-toast","version":"6.1.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@6.1.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"24b7f4d794b7dc0c365fb053d5ab6f530492a965","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-6.1.0.tgz","fileCount":72,"integrity":"sha512-jF9LwuPG3N1EDwSkwPsmB0CqiwI94zbJBo5oSwj3dsTftmTo8hJw9Hr5spAQOa7mhoy4pbgACWOx8xspwSAXQA==","signatures":[{"sig":"MEUCIA31Ykhl0SaMuqTZifqooQVuGMFh/h2ZvWX6feFuQ1HvAiEA7HH4Hrv4HNr4x74xafXKh+vXLtYAQRzGALWPm+tLZoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":407886},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6d27ebedd764f06375d774f736f5b217206b219d","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"10.2.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=16.0.0","@ngneat/overview":"5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_6.1.0_1704435820983_0.5405859495798433","host":"s3://npm-registry-packages"}},"7.0.0-beta.1":{"name":"@ngneat/hot-toast","version":"7.0.0-beta.1","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@7.0.0-beta.1","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"cdd0d957bc404e02b2a665631ea235c4c329f420","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-7.0.0-beta.1.tgz","fileCount":72,"integrity":"sha512-COwZidnhpFGFsUhDL52hDzH88z959Gw7soB3f97aq++CyODJOoXRUUT5mHXFoYFU3eb+5JKLfpXfxdT4x/pV/A==","signatures":[{"sig":"MEUCIQD6H53ZY3okD+DILZQh8PSqN7ioGlVV2sd4f2Qry29oTQIgLptq4wO1lCHmMs5EvPl7aINDFjebf2zDjp6C1p2Qw2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401486},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16 <17\nnpm install @ngneat/overview@5.1.1 @ngneat/hot-toast@6\n\n# For Angular version >= 17\nnpm install @ngneat/overview@6.0.0 @ngneat/hot-toast@7\n```\n\n### Module Setup\n\n> This is taken care with ng add @ngneat/hot-toast\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------- | --------------------- | ----------------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n| visibleToasts | `number` | Sets the number of toasts visible. 0 will set no limit.
_Default: 5_ |\n| stacking | `\"vertical\"\\|\"depth\"` | Sets Sets the type of stacking
_Default: \"vertical\"_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"9d6d864df978a81671854b46f210db425127b1c0","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"10.2.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"@angular/core":">= 17.0.0 < 18.0.0","@ngneat/overview":"6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_7.0.0-beta.1_1707740089501_0.31993229834013825","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@ngneat/hot-toast","version":"7.0.0","keywords":["angular","angular 2","hot-toast"],"license":"MIT","_id":"@ngneat/hot-toast@7.0.0","maintainers":[{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},{"name":"itayod","email":"itayoded1@gmail.com"},{"name":"shahar.kazaz","email":"shahar.kazaz@gmail.com"}],"homepage":"https://github.com/ngneat/hot-toast#readme","bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"dist":{"shasum":"74c4c5726e3a6f7fc0b2f0697a77edd3c4053ec1","tarball":"https://registry.npmjs.org/@ngneat/hot-toast/-/hot-toast-7.0.0.tgz","fileCount":72,"integrity":"sha512-t/7msPgtZT534HBxAPjvr6dovP0jyf/intibceUq6i+woa4gnt44jSMsAmI3WVz8UoOmwG1wBwJOKu0zdLmCOA==","signatures":[{"sig":"MEUCIQC8J9Zlb4f8TDFegl3btWgpSxh95lQQNWC5jiUhV1ya2gIgWsXmVf9uEWGXqyppnP3OqGc/Gugr2ES2/vfBasFW7aU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":401479},"module":"fesm2022/ngneat-hot-toast.mjs","ng-add":{"save":true},"exports":{".":{"esm":"./esm2022/ngneat-hot-toast.mjs","types":"./index.d.ts","default":"./fesm2022/ngneat-hot-toast.mjs","esm2022":"./esm2022/ngneat-hot-toast.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f30bd77dda271eb68d4bc659b88ca716cfb4bc97","typings":"index.d.ts","_npmUser":{"name":"netanel-ngneat","email":"netanel77999@gmail.com"},"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"10.2.3","description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">= 17.0.0 < 18.0.0","@ngneat/overview":"6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hot-toast_7.0.0_1707743976839_0.7576048418648458","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-01-28T08:29:59.544Z","modified":"2024-08-06T07:09:01.062Z","1.0.0-beta.1":"2021-01-28T08:29:59.945Z","1.0.0-beta.2":"2021-01-28T09:39:09.073Z","1.0.0-beta.3":"2021-01-28T20:00:56.923Z","1.0.0-beta.4":"2021-01-29T11:06:34.666Z","1.0.0-beta.5":"2021-01-30T10:28:15.732Z","1.0.0-beta.6":"2021-01-31T09:37:06.952Z","1.0.0-beta.7":"2021-01-31T19:01:30.504Z","1.0.0-beta.8":"2021-01-31T20:18:30.678Z","1.0.0":"2021-02-01T15:28:48.406Z","1.0.1-beta.1":"2021-02-02T07:25:16.823Z","1.0.1-beta.2":"2021-02-02T08:06:51.630Z","1.0.1":"2021-02-02T08:37:15.553Z","1.0.2":"2021-02-03T06:34:46.859Z","1.0.3":"2021-02-03T08:44:19.838Z","1.0.4-beta.1":"2021-02-05T06:28:49.631Z","1.0.4-beta.2":"2021-02-05T07:38:44.507Z","1.0.4-beta.3":"2021-02-05T07:58:35.083Z","1.0.4-beta.4":"2021-02-05T08:59:40.084Z","1.0.4-beta.5":"2021-02-05T09:55:54.382Z","1.0.4-beta.6":"2021-02-05T10:39:49.448Z","1.0.4-beta.7":"2021-02-05T10:59:43.198Z","1.0.4":"2021-02-05T11:02:21.361Z","1.0.5":"2021-02-07T13:33:05.766Z","1.0.6":"2021-02-08T03:51:54.532Z","1.0.7":"2021-02-11T05:48:07.415Z","1.0.8":"2021-02-11T07:38:54.907Z","1.0.9-beta.1":"2021-02-16T06:44:24.005Z","1.0.9":"2021-02-16T07:01:35.508Z","1.0.10":"2021-02-17T15:33:07.235Z","1.0.11":"2021-02-22T08:20:53.488Z","1.1.0":"2021-03-02T07:40:59.997Z","1.1.1":"2021-03-02T09:20:16.621Z","2.0.0":"2021-03-14T06:38:47.203Z","2.0.1":"2021-03-15T12:20:18.163Z","2.0.2":"2021-05-24T14:08:24.236Z","2.0.3-beta.1":"2021-06-07T12:52:02.193Z","3.0.0-beta.1":"2021-06-07T14:04:00.989Z","3.0.0":"2021-06-07T14:33:57.305Z","3.1.0-beta.1":"2021-06-22T15:09:09.739Z","3.1.0":"2021-06-22T15:20:29.114Z","3.2.0-beta.1":"2021-07-12T06:31:04.376Z","3.2.0":"2021-07-12T06:34:54.894Z","3.3.0-beta.1":"2021-07-13T06:07:59.542Z","3.3.0":"2021-07-13T06:19:20.295Z","3.3.1-beta.1":"2021-08-05T13:34:56.772Z","3.4.0":"2021-08-07T11:21:00.769Z","3.3.1-beta.2":"2021-08-11T03:37:57.385Z","3.3.1-beta.3":"2021-08-11T04:01:51.061Z","3.4.1":"2021-08-11T05:51:14.831Z","3.4.2":"2021-10-25T07:17:54.321Z","3.4.3-beta.1":"2021-11-11T06:54:50.355Z","3.4.3":"2021-11-11T07:02:21.591Z","4.0.0-beta.1":"2021-11-22T05:42:45.390Z","4.0.0":"2021-11-26T06:09:13.104Z","4.0.1-beta.1":"2021-12-14T10:35:12.271Z","4.0.1":"2021-12-14T14:15:20.858Z","4.1.0-beta.1":"2021-12-27T06:15:16.944Z","4.1.0":"2021-12-27T10:59:38.392Z","5.0.0-beta.1":"2023-01-06T06:34:12.794Z","5.0.0":"2023-01-06T10:47:20.733Z","5.0.1":"2023-01-21T06:58:07.212Z","5.0.2-beta.1":"2023-06-24T09:22:52.607Z","5.0.2":"2023-06-24T11:08:33.410Z","4.1.1":"2023-06-24T11:31:21.875Z","5.1.0-beta.1":"2023-09-04T10:42:44.059Z","6.0.0-beta.1":"2023-09-18T11:26:12.350Z","6.0.0-beta.2":"2023-09-18T11:39:26.705Z","6.0.0":"2023-09-18T11:50:04.540Z","6.0.1-beta.1":"2023-10-10T09:18:47.594Z","6.0.1":"2023-10-10T10:02:50.420Z","6.0.2":"2023-12-06T05:23:09.990Z","6.1.0-beta.1":"2024-01-05T06:11:20.549Z","6.1.0":"2024-01-05T06:23:41.236Z","7.0.0-beta.1":"2024-02-12T12:14:49.713Z","7.0.0":"2024-02-12T13:19:37.031Z"},"bugs":{"url":"https://github.com/ngneat/hot-toast/issue"},"license":"MIT","homepage":"https://github.com/ngneat/hot-toast#readme","keywords":["angular","angular 2","hot-toast"],"repository":{"url":"git+https://github.com/ngneat/hot-toast.git","type":"git"},"description":"Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.","maintainers":[{"email":"netanel77999@gmail.com","name":"netanel-ngneat"}],"readme":"

\n \n

\n\n
\n\n[![npm](https://img.shields.io/npm/v/@ngneat/hot-toast?style=flat-square)](https://www.npmjs.com/package/@ngneat/hot-toast)\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngneat/hot-toast/blob/master/LICENSE)\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ngneat/hot-toast/compare)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/linted_with-eslint-4b32c3.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n[![ngneat](https://img.shields.io/badge/@-ngneat-383636?style=flat-square&labelColor=8f68d4)](https://github.com/ngneat/)\n[![cypress](https://img.shields.io/badge/tested%20with-cypress-2196F3.svg?style=flat-square)](https://www.cypress.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)\n\n

\n \n

\n\n## Compatibility with Angular Versions\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
@ngneat/hot-toastAngular
\n 3.x\n \n >= 9.1.13 < 13\n
\n 4.x\n \n >= 13 < 15\n
\n 5.x\n \n >= 15 < 16\n
\n 6.x\n \n >= 16\n
\n\n## Features\n\n- 🔥 **Hot by default**\n- ☕ **Easy to use**\n- 🐍 **Snackbar variation**\n- ♿ **Accessible**\n- 🖐️ **Reduce motion support**\n- 😊 **Emoji Support**\n- 🛠 **Customizable**\n- ⏳ **Observable API**\n- ✋ **Pause on hover**\n- 🔁 **Events**\n- 🔒 **Persistent**\n\n## Installation and setup\n\nYou can install it through **Angular CLI**:\n\n```bash\nng add @ngneat/hot-toast\n```\n\nor with **npm**:\n\n```bash\n# For Angular version >= 9.1.13 < 13\nnpm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3\n\n# For Angular version >= 13 < 15\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4\n\n# For Angular version >= 15 <16\nnpm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5\n\n# For Angular version >= 16 <17\nnpm install @ngneat/overview@5.1.1 @ngneat/hot-toast@6\n\n# For Angular version >= 17\nnpm install @ngneat/overview@6.0.0 @ngneat/hot-toast@7\n```\n\n### Module Setup\n\n> This is taken care with ng add @ngneat/hot-toast\n\nNow `HotToastModule` in your `app.module`. You can also set global toast options ([`Partial`](#toastconfig)) here.:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [HotToastModule.forRoot()],\n})\nclass AppModule {}\n```\n\n### Standalone Setup\n\n```typescript\nimport { AppComponent } from './src/app.component';\n\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideHotToastConfig(), // @ngneat/hot-toast providers\n ]\n});\n```\n\n### Stylings\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use '@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Basic Usage\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n showToast() {\n this.toast.show('Hello World!');\n this.toast.loading('Lazyyy...');\n this.toast.success('Yeah!!');\n this.toast.warning('Boo!');\n this.toast.error('Oh no!');\n this.toast.info('Something...');\n }\n\n update() {\n saveSettings\n .pipe(\n this.toast.observe({\n loading: 'Saving...',\n success: 'Settings saved!',\n error: 'Could not save.',\n })\n )\n .subscribe();\n }\n}\n```\n\nYou can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:\n\n```typescript\nimport { HotToastService } from '@ngneat/hot-toast';\n\n@Component({})\nexport class AppComponent {\n constructor(private toast: HotToastService) {}\n\n customToast() {\n this.toast.success('Look at my styles, and I also need more time!', {\n duration: 5000,\n style: {\n border: '1px solid #713200',\n padding: '16px',\n color: '#713200',\n },\n iconTheme: {\n primary: '#713200',\n secondary: '#FFFAEE',\n },\n });\n }\n}\n```\n\nYou can also set global [`ToastConfig`](#toastconfig) options while importing:\n\n```typescript\nimport { HotToastModule } from '@ngneat/hot-toast';\n\n@NgModule({\n imports: [\n HotToastModule.forRoot({\n reverseOrder: true,\n dismissible: true,\n autoClose: false,\n }),\n ],\n})\nclass AppModule {}\n```\n\nAdditionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:\n\n```typescript\n// app.config.ts\nimport { provideHotToastConfig } from '@ngneat/hot-toast';\n\nexport const appConfig: ApplicationConfig = {\n providers: [provideHotToastConfig({ ... })],\n};\n```\n\n## Examples\n\nYou can checkout examples at: .\n\n### ToastConfig\n\nAll options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:\n\n| Name | Type | Description |\n| ------------- | --------------------- | ----------------------------------------------------------------------- |\n| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |\n| visibleToasts | `number` | Sets the number of toasts visible. 0 will set no limit.
_Default: 5_ |\n| stacking | `\"vertical\"\\|\"depth\"` | Sets Sets the type of stacking
_Default: \"vertical\"_ |\n\n### ToastOptions\n\nConfiguration used when opening an hot-toast.\n\n| Name | Type | Description | Available in global config? |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngneat.github.io/hot-toast/#only-one-at-a-time)_ | No |\n| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |\n| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |\n| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngneat.github.io/hot-toast/#positions)_ | Yes |\n| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngneat.github.io/hot-toast/#dismissible)_ | Yes |\n| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |\n| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |\n| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngneat.github.io/hot-toast/#snackbar)_ | Yes |\n| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngneat.github.io/hot-toast/#persistent)_ | No |\n| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/overview/blob/main/projects/ngneat/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngneat.github.io/hot-toast/#emoji)_ | Yes |\n| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |\n| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |\n| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngneat.github.io/hot-toast/#themed)_ | Yes |\n| closeStyle | `style object` | Extra styles to apply for close button | Yes |\n| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngneat/hot-toast/blob/master/projects/ngneat/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngneat.github.io/hot-toast/#template-data), [Component with Data](https://ngneat.github.io/hot-toast/#component-data)_ | No |\n| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngneat.github.io/hot-toast/#injector)_ | No |\n\n---\n\n## Supported Browsers\n\nLatest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngneat/hot-toast/labels/browser).\n\n## Accessibility\n\nHot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.\n\nFocus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.\n\nHot-toasts that have an [action available](https://ngneat.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.\n\n## Breaking Changes\n\n### [2.0.2 -> 3.0.0](./CHANGELOG.md#300-2021-06-07)\n\n- Content inside `.hot-toast-message` were wrapped into `dynamic-content`, now they are wrapped into `div` > `dynamic-view`\n- Use optional chaining while access `toastRef` in template. E.g. `toastRef?.data`\n- Add `@Optional()` decorator in components' constructor while injecting tokens which are used by toast's injector\n\n### [4.1.0 -> 5.0.0](./CHANGELOG.md#500-2023-01-06)\n\nFor this version you will also need to import the styles from the library like this if you're not using NgAdd\n\nif you use **SCSS** add this line to your main **styles.scss**:\n\n```scss\n@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';\n```\n\nor if you use **CSS** add this to your styles inside your **angular.json**:\n\n```json\n\"styles\": [\n \"node_modules/@ngneat/hot-toast/src/styles/styles.css\",\n],\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n
\"Dharmen
Dharmen Shah
💻 🖋 🎨 📖 💡		\"Netanel
Netanel Basal
🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀		\"Timo
Timo Lins
🎨 🤔		\"Patrick
Patrick Miller
🚧 📦		\"Gili
Gili Yaniv
💻		\"Artur
Artur Androsovych
🚧		\"Luis
Luis Castro
💻
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n
Icons made by Freepik from www.flaticon.com
\n","readmeFilename":"README.md"}