{"_id":"@cicciosgamino/snack-bar","_rev":"5-103a26ae2b94ec528eedaa1ff4c038db","name":"@cicciosgamino/snack-bar","dist-tags":{"latest":"1.4.0"},"versions":{"1.0.0":{"name":"@cicciosgamino/snack-bar","version":"1.0.0","keywords":["SnackBar","WebComponent","CustomElement","Lit"],"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","_id":"@cicciosgamino/snack-bar@1.0.0","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/snack-bar#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/snack-bar/issues"},"dist":{"shasum":"3f0b43f3acdb982306fecf663b909f6e0e8ecf18","tarball":"https://registry.npmjs.org/@cicciosgamino/snack-bar/-/snack-bar-1.0.0.tgz","fileCount":5,"integrity":"sha512-+FO3rbvfh+2g8TwTJjQ82TVGYFaQDjtz7gDwwbzDw6jStQVQlwktC5u8Z6SzIKClignRLGffyPU/Of+VpKDeNg==","signatures":[{"sig":"MEQCIBifSDTWq9vyL7ZxdUtlaDPYThBG2ceNoF1L1eu82CtCAiAiC/HtiZLdPoi9FQQF1U/J1TdEsFhWjQyOkrArN+kNXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":59645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAoldCRA9TVsSAnZWagAAm+4P/2PChzBpKsTwCaOg4Oob\nHC3UYLW3vZ9npy7MuBM88w7DPfGGarke5MuhvUIg99Cd0ueqxbkG+5vdrqlW\nfK4RNtF/B1u68yeVBcCidPqqd5AfYJ42o8zNI31Ao1q7WghjX43XDZaLSu0w\n9tjQyHTPwGDzUsKn1neS6QKbfVROdJz/h1kYwadIMN6M6P8NjxJA0lTi8WSJ\nJMzd7y2BjpJJGDj63U/fEeKWG+wASZtj7GRZpaGjuF8wLMSWA+sEA7JeNqrk\nL/xlbV0TLz9AexVVD6LQ3goGMOUDPRzCefWStC5YbszhNICmiCnbgsIObkJY\ndspkfmfnvDBSEnpWlQWmlxdsUr1GoeqIMs1fPiIqNk0FQpADW8OjpvRWLYLI\n7Cc+horgNh5VnsGsxjdHP+UgduuJFMQEeifhGkuT1tQ+YUAI6iB1lgvtdmOs\nKwvCO97eVtWgYTn59NqplBHMV3x7/yFmnpJQZRtvAQ67U6XPm3kaGD8UZiYd\ntMvruK5ThY6vijX66edPs4IJzQNIh+19ihKHRgBg/dSqoF/JRf9xe+QER2rC\nnY7KF89uqGKRLYGWPGtSMH03IBoTseS/mH8wo3ovjwee0DIcMl+ECPHPC0xA\nAUB5SvO35ufuLBcl+dK0coPQ4TAlweOjrCpampyUxyJFgsn9hez/r5olXiCQ\nMTb5\r\n=ojCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/snack-bar.es.js","exports":"./dist/snack-bar.es.js","gitHead":"1bdb833970ebcf6e69ef5eaa706c250138a9d695","private":false,"scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview --port 3000 --host"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/snack-bar.git","type":"git"},"_npmVersion":"7.19.0","description":"Simple snackbar Lit Element","directories":{"example":"examples/index.html"},"_nodeVersion":"16.4.0","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^2.4.3"},"_npmOperationalInternal":{"tmp":"tmp/snack-bar_1.0.0_1627556189427_0.47559931787494314","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@cicciosgamino/snack-bar","version":"1.1.0","keywords":["SnackBar","WebComponent","CustomElement","Lit"],"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","_id":"@cicciosgamino/snack-bar@1.1.0","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/snack-bar#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/snack-bar/issues"},"dist":{"shasum":"253a62f1c812431ab047f2ac0320aa10ffc7f1f5","tarball":"https://registry.npmjs.org/@cicciosgamino/snack-bar/-/snack-bar-1.1.0.tgz","fileCount":7,"integrity":"sha512-2Sv4lXkE1cL9pzTjESKeDY/QHW1Goh5PSnELmoUc9RKDcZeNu5tycs2YFPPo82FwuFyfYU2S4Af4lelA0HBPXQ==","signatures":[{"sig":"MEUCIQCgP2aN1dwmrN1lLoe+dBiUeDCTpQyywTxFsncvYR9xAAIgE6TE5Xv+GeZsDP9FbMj202QQOVhqy3//+hV7Y0cTiMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":49642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhArPYCRA9TVsSAnZWagAAz0YQAI1onHIJOv14bquDquc6\nwYPyWR3Fhbf3bk4WwR2S4U7GGZJ1DrbODEfqT+rHx24tEPw5ERSPyXyRXxHR\nsGbdF5z+QOHa866TFGuQ/vJTgddXDdZQerl5uvD8W+6YgnuXM2WhRA2HLtT8\nxnoyyy42iPSAwoLOrxDGdjJ5Ei0g53JeadS6M2YEjLxU8D+qWQRIPCI1fcg1\nKMOV15N/08F9n5WS3/hyfkrowWFu5Sa6KLDv9alcISo0tSC009mHGGQFR8a8\ngC6C/vwAwRQAaafhlMAKKTa1LKBjP1e6RfMrNIK472bCkoEO6n3qfb5gst5c\nuvFdN7uz0+7GWZ7s0dOUvnhoIvxL5zS76pQrvu/aZv4btqIMk2dRQWAZVg5e\nvlCfWzxzdnPHF7/D38RAviTqxn2c5rlS3v2BvOlglfz30XgtOimumJcOjwbQ\n4BTcbaqT5Qtk/xAbP2LoAsubYbKbcBuIAUuO61QEreIKlwMHB7vmqcshIuZv\nSzR1KIWiyJvXUINWgnjdxa1hsd548qYNsVN1msSEzZrMgO1NfDCb4qzRf3Ie\nJP38eSTfXOd/hFCYhRZj5PVVf4JmGDr8Uaaq1M6B59mrv3NZJ30y7CGXAfK/\n7Se7AeyQk7iluLF6kvtu8MRor+fMOPFXbxHIL7NpEnAUe3NDmRii2mf4iHSw\ndjEe\r\n=+iZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"snack-bar.js","module":"snack-bar.js","gitHead":"36c91f909aaca5b4be4e24a9448c44b108ffa9c0","private":false,"scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview --port 3000 --host"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/snack-bar.git","type":"git"},"_npmVersion":"7.19.0","description":"Simple snackbar Lit Element","directories":{"example":"examples/index.html"},"_nodeVersion":"16.4.0","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^2.4.3"},"_npmOperationalInternal":{"tmp":"tmp/snack-bar_1.1.0_1627567064088_0.010670832397408736","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@cicciosgamino/snack-bar","version":"1.3.0","keywords":["SnackBar","WebComponent","CustomElement","Lit"],"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","_id":"@cicciosgamino/snack-bar@1.3.0","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"homepage":"https://github.com/CICCIOSGAMINO/snack-bar#readme","bugs":{"url":"https://github.com/CICCIOSGAMINO/snack-bar/issues"},"dist":{"shasum":"511c75a24acde28969ab8ad717a368ad576449fe","tarball":"https://registry.npmjs.org/@cicciosgamino/snack-bar/-/snack-bar-1.3.0.tgz","fileCount":7,"integrity":"sha512-ixGBb67W9W1weRM0Q357I1ua7DlnWlnUneUG3etwNhyzfB5GauXFzsb69+tzOaw5ClDGRdBzdY5PsSLblaSwfA==","signatures":[{"sig":"MEQCIFP/CSHTPq6uxkdK7QGUxw26T0YU/06KJXpyY4/IgH5DAiBZHaM0axcXqu6/L5OxIhzT0Lt7FIv77NhOfKGjYk2VbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50359},"main":"snack-bar.js","module":"snack-bar.js","gitHead":"bc2be34ebe945f915d47cc5c262cdb4adb4a922b","private":false,"scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview --port 3000 --host"},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"repository":{"url":"git+https://github.com/CICCIOSGAMINO/snack-bar.git","type":"git"},"_npmVersion":"9.6.6","description":"Simple snackbar Lit Element","directories":{},"_nodeVersion":"20.2.0","dependencies":{"lit":"*"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.9"},"_npmOperationalInternal":{"tmp":"tmp/snack-bar_1.3.0_1686040624036_0.35512029065966044","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"@cicciosgamino/snack-bar","version":"1.4.0","description":"Simple snackbar Lit Element","main":"snack-bar.js","module":"snack-bar.js","repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/snack-bar.git"},"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","private":false,"scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview --port 3000 --host"},"keywords":["SnackBar","WebComponent","CustomElement","Lit"],"bugs":{"url":"https://github.com/CICCIOSGAMINO/snack-bar/issues"},"homepage":"https://github.com/CICCIOSGAMINO/snack-bar#readme","dependencies":{"lit":"*"},"devDependencies":{"vite":"^7.3.0"},"gitHead":"bc2be34ebe945f915d47cc5c262cdb4adb4a922b","_id":"@cicciosgamino/snack-bar@1.4.0","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-QBnnmoM/dMz3p5gclOk/yL8NJ2ryxFeJBcczh/q+Yj2ii4Rd0sx1aTkuhDcjh3foa9LjTAgugYQZgKe4KYLRSg==","shasum":"ba1c6d6503a52cb13912fb3bc88b671ccb690757","tarball":"https://registry.npmjs.org/@cicciosgamino/snack-bar/-/snack-bar-1.4.0.tgz","fileCount":7,"unpackedSize":51179,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAjWAZlX9utbSkctiuWM1AdREe0aQh2BNK6DwITyU6I8AiARkHGufwFhmdeljVQ9i8qZcAIGJc3uat0ngxWzo8z6jQ=="}]},"_npmUser":{"name":"cicciosgamino","email":"marco.canali@gmail.com"},"directories":{},"maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/snack-bar_1.4.0_1767392200510_0.35924772128612226"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-29T10:56:29.353Z","modified":"2026-01-02T22:16:40.874Z","1.0.0":"2021-07-29T10:56:29.572Z","1.1.0":"2021-07-29T13:57:44.249Z","1.3.0":"2023-06-06T08:37:04.196Z","1.4.0":"2026-01-02T22:16:40.656Z"},"bugs":{"url":"https://github.com/CICCIOSGAMINO/snack-bar/issues"},"author":{"name":"@cicciosgamino","email":"marco.canali@gmail.com"},"license":"GPL-3.0","homepage":"https://github.com/CICCIOSGAMINO/snack-bar#readme","keywords":["SnackBar","WebComponent","CustomElement","Lit"],"repository":{"type":"git","url":"git+https://github.com/CICCIOSGAMINO/snack-bar.git"},"description":"Simple snackbar Lit Element","maintainers":[{"name":"cicciosgamino","email":"marco.canali@gmail.com"}],"readme":"![GitHub issues](https://img.shields.io/github/issues/CICCIOSGAMINO/snack-bar)\n[![npm version](https://badgen.net/npm/v/@cicciosgamino/progress-ring)](https://www.npmjs.com/package/@cicciosgamino/snack-bar)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/cicciosgamino/snack-bar)\n\n# 🌰 \\<snack-bar\\>\n\nSimple Snackbar CustomElement 🌰!\n\n<p align=\"center\">\n  <a href=\"#examples\">examples</a> •\n  <a href=\"#usage\">usage</a> •\n  <a href=\"#api\">api</a> •\n  <a href=\"#accessibility\">accessibility</a> •\n  <a href=\"#todo\">TODO</a> •\n</p>\n\n## Examples\n\n![Example Snackbar](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleSnackbar.gif)\n\n```html\n<snack-bar timing=\"5000\" title=\"Offline\"></snack-bar>\n```\n\n## 🚀 Usage\n\n1. Install package\n```bash\nnpm install --save @cicciosgamino/snack-bar\n```\n\n2. Import\n```html\n<!-- Import Js Module -->\n<script type=\"module\">\n  // Importing this module registers <progress-ring> as an element that you\n  // can use in this page.\n  //\n  // Note this import is a bare module specifier, so it must be converted\n  // to a path using a server such as @web/dev-server.\n  import '@cicciosgamino/snack-bar'\n</script>\n```\n\n3. Place in your HTML\n```html\n<snack-bar timing=\"5000\" title=\"Offline\"></snack-bar>\n```\n\n## 🐝 API\n\n### 📒 Properties/Attributes\n\n| Name | Type | Default | Description\n| ------- | ---------- | ------------ | --------------\n| timing  | Number  | `3000`  | Snackbar active timing\n| title   | String  | `🌰 ... SnackBar Title` | Snackbar title\n| active  | Boolean | `` | Snackbar active attribute (present/NOT)\n| closebtn| Boolean | `` | Show the close button when attribute is present\n\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show(msg, time=2700, bkColor='#333', txtColor='#f5f5f5') => void` | Show the snackbar with custom message, time, background-color and text-color\n| `closeSnackbar() => void`  | Close the snackbar\n\n\n### Events\n*None*\n\n### 🧁 CSS Custom Properties\n\n| Name | Default | Description\n| ------------------- | --------- | ----------------------------------\n| `--snak-bk-color`   |   `#333`  | Snackbar background-color\n| `--snack-txt-color` | `#f5f5f5` | Snackbar text color\n| `--snack-font-size` | `2.1rem`  | Snackbar text / space / proportion\n| `--snack-bottom`    | `0`       | Snackbar bottom\n| `--snack-radius`    | `1px`     | Snackbar border-radius\n\n### 🤖 Write HTML and JavaScript\nImport the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as `<button>`:\n\n```html\n<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>My Example App</title>\n\n    <!-- Add support for Web Components to older browsers. -->\n    <script src=\"./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\n\n  </head>\n  <body>\n    <!-- Use Web Components in your HTML like regular built-in elements. -->\n    <snack-bar url=\"\"></snack-bar>\n\n    <!-- The Material Web Components use standard JavaScript modules. -->\n    <script type=\"module\">\n\n      // Importing this module registers <progress-ring> as an element that you\n      // can use in this page.\n      //\n      // Note this import is a bare module specifier, so it must be converted\n      // to a path using a server such as @web/dev-server or @vitejs.\n      import '@cicciosgamino/snack-bar'\n\n      // Standard DOM APIs work with Web Components just like they do for\n      // built-in elements.\n      window.addEventListener('DOMContentLoaded', () => {\n        const snack = document.querySelector('snack-bar')\n        setTimeout(() => {\n          // active the snack\n          snack.setAttribute('active', '')\n        }, 4000)\n        setTimeout(() => {\n          // close the snack (before timing ended)\n          snack.closeSnackbar()\n        }, 6000)\n      })\n    </script>\n  </body>\n</html>\n```\n\n### 🚀 Serve\nServe your HTML with any server or build process that supports bare module specifier resolution (see next section) in this project i'll use vite. So check the **vite.config.js** and the **package.json** for the scripts.\n\nvite.config.js\n```javascript\nimport { defineConfig } from 'vite'\nimport { resolve } from 'path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  build: {\n    lib: {\n      entry: 'snack-bar.js',\n      formats: ['es']\n    },\n    rollupOptions: {\n      input: {\n        main: resolve(__dirname, 'index.html')\n      }\n    }\n  }\n})\n```\n\npackage.json\n```json\n\"scripts\": {\n  \"dev\": \"vite --host\",\n  \"build\": \"vite build\",\n  \"preview\": \"vite preview --port 3000 --host\"\n},\n```\n\n## Contributing\n\nGot **something interesting** you'd like to **share**? Learn about [contributing](https://github.com/CICCIOSGAMINO/init/blob/master/CONTRIBUTING.md).\n\n# Accessibility\nTODO\n\n# 🔧 TODO \n- [ ] Basic Unit testing\n\n## CSS encapsulation\nThe elements HTML structure is initialized in a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][]. Legacy browsers require various other polyfills. See [`examples/index.html`][example] for details.\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n\n\n## Author\n\n| [![@cicciosgamino](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/justme%40412x412_round.png)](https://linkedin.com/in/) \t|\n|:------------------------------------------------------------------------------------------:\t|\n|                                    **@cicciosgamino**                                      \t|\n\n## Support\nReach out to me at one of the following places:\n\n- [Github](https://github.com/CICCIOSGAMINO)\n- [Twitter](https://twitter.com/cicciosgamino)\n\n## Donate\n\nDonate help and contibutions!\n\n# License\n[GNU General Public License v3.0](https://github.com/CICCIOSGAMINO/init/blob/master/LICENSE)\n\nMade 🧑‍💻 by [@cicciosgamino](https://cicciosgamino.web.app)","readmeFilename":"README.md"}