{"id":16396192,"url":"https://github.com/paraboly/web-component-chmod-checkbox","last_synced_at":"2025-10-26T14:31:16.818Z","repository":{"id":49662028,"uuid":"211858235","full_name":"Paraboly/web-component-chmod-checkbox","owner":"Paraboly","description":"CHMOD based animated checkbox WebComponent with StencilJS","archived":false,"fork":false,"pushed_at":"2021-06-11T08:19:01.000Z","size":292,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T00:23:43.781Z","etag":null,"topics":["animated","animated-checkbox","animation","checkbox","chmod","chmod-checkbox","freakycoder","front-end","html","jsx","paraboly","stenciljs","ui","web","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://paraboly.com","language":"TypeScript","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/Paraboly.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-30T12:47:20.000Z","updated_at":"2021-06-11T08:18:56.000Z","dependencies_parsed_at":"2022-07-26T11:31:56.484Z","dependency_job_id":null,"html_url":"https://github.com/Paraboly/web-component-chmod-checkbox","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fweb-component-chmod-checkbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fweb-component-chmod-checkbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fweb-component-chmod-checkbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Paraboly%2Fweb-component-chmod-checkbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Paraboly","download_url":"https://codeload.github.com/Paraboly/web-component-chmod-checkbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347673,"owners_count":19456970,"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":["animated","animated-checkbox","animation","checkbox","chmod","chmod-checkbox","freakycoder","front-end","html","jsx","paraboly","stenciljs","ui","web","web-component","web-components"],"created_at":"2024-10-11T05:06:41.609Z","updated_at":"2025-10-26T14:31:16.435Z","avatar_url":"https://github.com/Paraboly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=for-the-badge)\n\n\n\u003cimg alt=\"WebComponent Chmod Checkbox\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n\n[![CHMOD based animated checkbox WebComponent with StencilJS](https://img.shields.io/badge/-CHMOD%20based%20animated%20checkbox%20WebComponent%20with%20StencilJS-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/web-component-chmod-checkbox)\n\n\n[![npm version](https://img.shields.io/npm/v/@paraboly/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/chmod-checkbox)\n[![npm](https://img.shields.io/npm/dt/@paraboly/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/chmod-checkbox)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"WebComponent Chmod Checkbox\" src=\"assets/Screenshots/example.gif\" /\u003e\n  \u003cimg alt=\"WebComponent Chmod Checkbox\" src=\"assets/Screenshots/example.png\" /\u003e\n\u003c/p\u003e\n\nChmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE and EXECUTE values. These text values are customizable. It has built-in chmod calculator for each value. \n\n\n## Fundamental CHMOD Architecture\n\n\n| Value | R   | W   | X   | Description   |\n| ----- | --- | --- | --- | ------------- |\n| 0     | 0   | 0   | 0   | NO_PERMISSION |\n| 1     | 1   | 0   | 0   | READ          |\n| 2     | 0   | 1   | 0   | WRITE         |\n| 3     | 1   | 1   | 0   | READ/WRITE    |\n| 4     | 0   | 0   | 1   | EXECUTE       |\n| 5     | 1   | 0   | 1   | READ/EXECUTE  |\n| 6     | 0   | 1   | 1   | WRITE/EXECUTE |\n| 7     | 1   | 1   | 1   | ALL           |\n\n\n## Installation\n\n## First Install the Peer Dependency\n\nThis peer dependency is essential for this library! You need to install it\n\n### [pwc-animated-checkbox](https://github.com/Paraboly/pwc-animated-checkbox)\n\n```js\nnpm i @paraboly/pwc-animated-checkbox\n```\n\n\n### Script tag (Recommended: Painless)\n- Put a script tag similar to this `\u003cscript src=\"https://unpkg.com/@paraboly/chmod-checkbox@latest/dist/chmod-checkbox.js\"\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### Node Modules\n- Run `npm install @paraboly/chmod-checkbox --save`\n- Put a script tag similar to this `\u003cscript src='node_modules/@paraboly/chmod-checkbox/dist/chmod-checkbox.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n- Run `npm install @paraboly/chmod-checkbox --save`\n- Add an import to the npm packages `import @paraboly/chmod-checkbox;`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n# Usage\n\n```html\n\u003cchmod-checkbox permission=\"0\" /\u003e\n```\n\n## How to get value from a prop?\n\n```js\ndocument.querySelectorAll(\"chmod-checkbox\")[0].permission\ndocument.querySelectorAll(\"chmod-checkbox\")[0].first\ndocument.querySelectorAll(\"chmod-checkbox\")[0].middle\ndocument.querySelectorAll(\"chmod-checkbox\")[0].last\n\n```\n\n### Configuration - Props\n\n\n| Property   |  Type  | Default | Description                       |\n| ---------- | :----: | :-----: | --------------------------------- |\n| permission | number |    0    | get the changing permission value |\n\n\n### Future Plans\n\n- [x] ~~LICENSE~~\n- [ ] Customizable colors\n- [x] ~~Make another web-component with just animated checkbox and implement it on this library~~\n- [ ] Write an article about the lib on Medium\n\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nWebComponent Chmod Checkbox is available under the MIT license. See the LICENSE file for more info.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Fweb-component-chmod-checkbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparaboly%2Fweb-component-chmod-checkbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparaboly%2Fweb-component-chmod-checkbox/lists"}