{"id":21721658,"url":"https://github.com/polydile/dile-top-message","last_synced_at":"2025-03-20T21:45:00.775Z","repository":{"id":35119298,"uuid":"209061580","full_name":"Polydile/dile-top-message","owner":"Polydile","description":"Web component to implement a message area located in the top of the page or an element, based on LitElement","archived":false,"fork":false,"pushed_at":"2023-01-04T10:35:24.000Z","size":1758,"stargazers_count":2,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-29T18:47:15.155Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polydile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-17T13:28:20.000Z","updated_at":"2021-01-11T19:04:53.000Z","dependencies_parsed_at":"2023-01-15T14:12:58.618Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-top-message","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-top-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-top-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-top-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-top-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-top-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244694246,"owners_count":20494610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T02:18:20.617Z","updated_at":"2025-03-20T21:45:00.739Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moved\n\n**This package has moved** and is now available at [@dile/dile-message](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained.\n\n# \\\u003cdile-top-message\u003e\n\nWeb Component to show a custom message to the user. This component display the message until the user clicks in the included close icon. There are some posible ways to set the message and open the message interface. Also there is an animation when the message opens and closes.\n\nYou may see different implementations running in the [demos page](https://dile-top-message.polydile.com).\n\nThis webcomponent is based on LitElement and follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.\n\n## Installation\n```bash\nnpm i dile-top-message\n```\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'dile-top-message/dile-top-message.js';\n\u003c/script\u003e\n\n\u003cdile-top-message opened\u003eHi from Polydile!!\u003c/dile-top-message\u003e\n```\n\nAlso is posible to set the display message in the \"message\" property, and open the interface with the open() method.\n\n```html\n\u003cdile-top-message message=\"This is other message\" id=\"msgElement\"\u003e\u003c/dile-top-message\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\n  document.getElementById('msgElement').open();\n});\n\u003c/script\u003e\n```\n\nAnother possibility is to simply call the openMessage() method, setting the message in the method parameter.\n\n```html\n\u003cdile-top-message id=\"msgElement\"\u003e\u003c/dile-top-message\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\n  document.getElementById('msgElement').openMessage('Setting a message and opening the interface in one step');\n});\n\u003c/script\u003e\n```\n\n## Properties\n\n- **opened**: If true the feedbak box is in opened status.\n- **message**: Message to display. Remember that, if message='' or undefined, then the component will display the content comming from the slot.\n\n## Events\n\n- **dile-top-message-closed-by-user**: This event is dispatched when the component closes by a user click on the close icon.\n\n## Style customization\n\nYou can customize the message box interface by using the CSS custom properties bellow.\n\nCustom property | Description | Default\n----------------|-------------|---------\n--dile-top-message-color | Message text and icon color | #fff\n--dile-top-message-background-color | Message background color | #666\n--dile-top-message-padding | Padding for the message box | 15px\n--dile-top-message-icon-size | Close icon size | 20px\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-top-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-top-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-top-message/lists"}