{"_id":"interstellar-ui-messages","_rev":"30-a3d9142113ce3e6f0aa53b5fb61e314c","name":"interstellar-ui-messages","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"interstellar-ui-messages","version":"0.0.1","keywords":["stellar","interstellar"],"author":{"name":"Stellar Development Foundation","email":"stellar@stellar.org"},"license":"Apache-2.0","_id":"interstellar-ui-messages@0.0.1","maintainers":[{"name":"stellar","email":"npm@stellar.org"}],"homepage":"https://github.com/stellar/interstellar-ui-notifications","bugs":{"url":"https://github.com/stellar/interstellar-ui-notifications/issues"},"dist":{"shasum":"1b138106c7f8b00f9dcddd921ffbb33680e9735a","tarball":"https://registry.npmjs.org/interstellar-ui-messages/-/interstellar-ui-messages-0.0.1.tgz","integrity":"sha512-wkQ6iZF6nj0MxnxT61UXja1Y8WuCfhEx8Owe2tRYaHxBFk3PiK0m8Gnh2W0Jilb2QDTvHkjFXsnNONPMfoawHQ==","signatures":[{"sig":"MEYCIQDsUqrwY6ON4Baco8WpjdAkDNNTxxNEOrGjsGXggLIMJwIhAP+bV/bQ34Is38tUgjvv6EHfBHy3p+JF7C8WDiUJBfyG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"1b138106c7f8b00f9dcddd921ffbb33680e9735a","gitHead":"2cee8c5a4056be0afd32bee0ef4119ce016a3eb3","scripts":{"test":"gulp test"},"_npmUser":{"name":"stellar","email":"npm@stellar.org"},"repository":{"url":"http://github.com/stellar/interstellar-ui-notifications.git","type":"git"},"_npmVersion":"2.1.9","description":"`interstellar-ui-messages` ==========================","directories":{},"_nodeVersion":"0.10.33","dependencies":{"lodash":"^2.4.1","interstellar-core":"^0.0.2"}},"0.0.2":{"name":"interstellar-ui-messages","version":"0.0.2","keywords":["stellar","interstellar"],"author":{"name":"Stellar Development Foundation","email":"stellar@stellar.org"},"license":"Apache-2.0","_id":"interstellar-ui-messages@0.0.2","maintainers":[{"name":"stellar","email":"npm@stellar.org"}],"homepage":"https://github.com/stellar/interstellar-ui-notifications","bugs":{"url":"https://github.com/stellar/interstellar-ui-notifications/issues"},"dist":{"shasum":"27b5babee4acca9cdeab5cb74decce963ee4f149","tarball":"https://registry.npmjs.org/interstellar-ui-messages/-/interstellar-ui-messages-0.0.2.tgz","integrity":"sha512-tb786LZGTsf7JDVRxVK12UzRm+f2W4ROpwcQ/H13UTopg/gwfjUY8VG1k3Hhg3vf+L1jcW/Im1GEqXmFYr6d4g==","signatures":[{"sig":"MEUCIHHbMnPLmO7JQpNHBNxV4/MThaun6vBfcCzfPIvnGqC8AiEA8L4eawTMjqLoMgSV9CrSXU6ay//qNmAS9/EAoUtP0w0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"27b5babee4acca9cdeab5cb74decce963ee4f149","gitHead":"60aad7bcd36ea748cfeab4662fa987956db53419","scripts":{"test":"gulp test"},"_npmUser":{"name":"stellar","email":"npm@stellar.org"},"repository":{"url":"http://github.com/stellar/interstellar-ui-notifications.git","type":"git"},"_npmVersion":"2.1.9","description":"`interstellar-ui-messages` ==========================","directories":{},"_nodeVersion":"0.10.33","dependencies":{"lodash":"^2.4.1","interstellar-core":"^0.0.3"}},"0.0.3":{"name":"interstellar-ui-messages","version":"0.0.3","keywords":["stellar","interstellar"],"author":{"name":"Stellar Development Foundation","email":"stellar@stellar.org"},"license":"Apache-2.0","_id":"interstellar-ui-messages@0.0.3","maintainers":[{"name":"stellar","email":"npm@stellar.org"}],"homepage":"https://github.com/stellar/interstellar-ui-notifications#readme","bugs":{"url":"https://github.com/stellar/interstellar-ui-notifications/issues"},"dist":{"shasum":"ddedeb7367833b74e59ff8898b3645f86cb2a7e8","tarball":"https://registry.npmjs.org/interstellar-ui-messages/-/interstellar-ui-messages-0.0.3.tgz","integrity":"sha512-DgnD/qbW7SNGmfxkI0fdqaX3E0QrUhhsQBAs8aJsKR4iUaQNK0S566mEFOukxlqGWGp7vpmWsVhF04kiZCnhDw==","signatures":[{"sig":"MEQCIHT8lFK4xBPaA8iqXKBf43NTB6g+HRKb+/3YwHwvb1c/AiBPqKq6tbps51S7AX557Vz554zaybPUb2HBGLop3WuB/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"ddedeb7367833b74e59ff8898b3645f86cb2a7e8","gitHead":"d77fe2b3cb8d51289854cbf12691f275d6321a9c","scripts":{"test":"gulp test"},"_npmUser":{"name":"stellar","email":"npm@stellar.org"},"repository":{"url":"git+ssh://git@github.com/stellar/interstellar-ui-notifications.git","type":"git"},"_npmVersion":"2.13.0","description":"`interstellar-ui-messages` ==========================","directories":{},"_nodeVersion":"0.10.33","dependencies":{"lodash":"~2.4.1","interstellar-core":"~0.0.3"}}},"time":{"created":"2015-07-21T12:04:05.240Z","modified":"2025-10-16T12:49:18.765Z","0.0.1":"2015-07-21T12:04:05.240Z","0.0.2":"2015-07-23T12:53:20.126Z","0.0.3":"2015-10-13T12:40:41.433Z"},"bugs":{"url":"https://github.com/stellar/interstellar-ui-notifications/issues"},"author":{"name":"Stellar Development Foundation","email":"stellar@stellar.org"},"license":"Apache-2.0","homepage":"https://github.com/stellar/interstellar-ui-notifications#readme","keywords":["stellar","interstellar"],"repository":{"url":"git+ssh://git@github.com/stellar/interstellar-ui-notifications.git","type":"git"},"description":"`interstellar-ui-messages` ==========================","maintainers":[{"email":"ops+stellar-npm-ci@stellar.org","name":"stellar-npm-ci"},{"email":"npm@stellar.org","name":"stellar-npm"},{"email":"iveta@stellar.org","name":"quietbits"},{"email":"account@nykis.net","name":"jacekn"},{"email":"nando@stellar.org","name":"fnando_sdf"},{"email":"cassio@stellar.org","name":"cassiomg"},{"email":"pbasu235@gmail.com","name":"piyalbasu"}],"readme":"`interstellar-ui-messages`\n==========================\n\nThe `interstellar-ui-messages` module is part of the [Interstellar Module System](https://github.com/stellar/interstellar).\n\nThis module provides common UI components.\n\n> Quick start to developing in the Interstellar eco-system:\n>\n> * Read [`Getting started`](https://github.com/stellar/interstellar/tree/master/docs) doc.\n> * Install [`interstellar-workspace`](https://github.com/stellar/interstellar-workspace).\n> * Contribute to our [open-source modules](https://github.com/stellar/interstellar/blob/master/docs/module-list.md) or develop your own.\n\n## Module contents\n\n#### Classes\n* [`Alert`](#alert-class)\n* [`AlertGroup`](#alertgroup-class)\n* [`Toast`](#toast-class)\n\n#### Services\n* [`interstellar-ui-messages.Alerts`](#interstellar-ui-messagesalerts-service)\n* [`interstellar-ui-messages.Toasts`](#interstellar-ui-messagestoasts-service)\n\n#### Widgets\n* [``](#interstellar-ui-messages-alerts-widget)\n* [``](#interstellar-ui-messages-toast-widget)\n\n## `Alert` class\n\n`Alert` object represents single alert notification which can be attached to an [`AlertGroup`](#alertgroup-class).\n\n```js\nimport {Alert} from 'interstellar-ui-messages';\n\nlet alert = new Alert({\n title: 'Password is incorrect',\n text: 'Make sure you are using a correct password to login.`,\n type: Alert.TYPES.ERROR,\n dismissible: false // default true\n});\n```\n\nThere are 4 possible `Alert.TYPES`:\n* `Alert.TYPES.SUCCESS`\n* `Alert.TYPES.INFO`\n* `Alert.TYPES.WARNING`\n* `Alert.TYPES.ERROR`\n\n`Alert`s with `dismissible` parameter set to true will show a little `×` icon to allow user to dismiss an alert.\n\nCheck [`AlertGroup`](#alertgroup-class) docs for information on how to display an `Alert`.\n\n**TODO**\n* Sample alert screenshots.\n* Alert/AlertGroup/widget graphic.\n* Solar styling tips.\n\n## `AlertGroup` class\n\n`AlertGroup` represents a place in your UI where alerts are displayed. Your application/widget can have multiple `AlertGroup`s.\n\nOnce you create a new alert group and register in [`Alerts` service](#interstellar-ui-messagesalerts-service) you can show your first [`Alert`](#alert-class).\n\n```js\nimport {Alert, AlertGroup} from 'interstellar-ui-messages';\n\nlet alertGroup = new AlertGroup();\nAlerts.registerGroup(alertGroup);\n\nlet alert = new Alert({\n title: 'Password is incorrect',\n text: 'Make sure you are using a correct password to login.`,\n type: Alert.TYPES.ERROR,\n dismissible: false // default true\n});\nalertGroup.show(alert);\n```\n\nYou can clear all alerts in existing group using `clear` method:\n\n```js\nalertGroup.clear();\n```\n\nTo display your alert group in your UI use [`` widget](#interstellar-ui-messages-alerts-widget).\n\n## `Toast` class\n\n`Toast` object represents single toast message that can be displayed using [`Toast` service](#interstellar-ui-messagestoasts-service).\n\n```js\nlet toast = new Toast('Transaction sent!');\n```\n\nYou can pass a second parameter with number of miliseconds your toast should be visible:\n\n```js\nlet toast = new Toast('Transaction sent!', 5000); // 5 seconds\n```\n\nToast will be visible for 2 seconds by default.\n\n## `interstellar-ui-messages.Alerts` service\n\n`Alerts` service allows you to register your [`AlertGroup`](#alertgroup-class).\n\n```js\nimport {AlertGroup} from 'interstellar-ui-messages';\n\nlet alertGroup = new AlertGroup();\nAlerts.registerGroup(alertGroup);\n```\n\nYou must register your alert group before you can use it within your application or widget.\n\nYou can also get previously registered group by it's ID:\n\n```js\nlet alertGroup = Alerts.getGroup(groupId);\n```\n\n## `interstellar-ui-messages.Toasts` service\n\nUse `Toasts` service to show your [`Toast`](#toast-class):\n\n```js\nimport {Toast} from 'interstellar-ui-messages';\n@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')\n@Inject('interstellar-ui-messages.Toasts')\nexport default class SendWidgetController {\n constructor(Toasts) {\n this.Toasts = Toasts;\n }\n\n send() {\n // Send transaction\n let toast = new Toast('Transaction sent!');\n this.Toasts.show(toast);\n }\n}\n```\n\nRemember you have to place [`` widget](#interstellar-ui-messages-toast-widget) somewhere in you application. Otherwise your `Toast` won't appear.\n\n## `` widget\n\nUse `` widget to display [`AlertGroup`](#alertgroup-class) in your UI. This widget accepts one parameter: `group` which represents [`AlertGroup`](#alertgroup-class) object you want to display.\n\n```js\nimport {AlertGroup} from 'interstellar-ui-messages';\n\n@Widget('send', 'SendWidgetController', 'interstellar-network-widgets/send-widget')\n@Inject('interstellar-ui-messages.Alerts')\nexport default class SendWidgetController {\n constructor(Alerts) {\n this.alertGroup = new AlertGroup();\n Alerts.registerGroup(this.alertGroup);\n }\n}\n```\n```html\n
\n \n
\n```\n\n## `` widget\n\nUse `` widget to display toasts in your UI. There should be only one, global toast widget in your application.\n\n```html\n\n```\n","readmeFilename":"README.md"}