{"id":15022360,"url":"https://github.com/soywod/catalyx","last_synced_at":"2025-10-23T14:31:21.971Z","repository":{"id":43953963,"uuid":"257405167","full_name":"soywod/catalyx","owner":"soywod","description":"⚗️ Collection of native Web Components.","archived":true,"fork":false,"pushed_at":"2023-01-07T17:19:26.000Z","size":1271,"stargazers_count":4,"open_issues_count":14,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T19:07:09.905Z","etag":null,"topics":["collection","custom-element","custom-elements","html-template","javascript","library","native","shadow-dom","typescript","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://catalyx.soywod.me","language":"TypeScript","has_issues":false,"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/soywod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"soywod","open_collective":"soywod","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-04-20T21:13:17.000Z","updated_at":"2025-01-07T23:41:12.000Z","dependencies_parsed_at":"2023-02-07T18:00:52.709Z","dependency_job_id":null,"html_url":"https://github.com/soywod/catalyx","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soywod%2Fcatalyx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soywod%2Fcatalyx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soywod%2Fcatalyx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soywod%2Fcatalyx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soywod","download_url":"https://codeload.github.com/soywod/catalyx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843715,"owners_count":19375191,"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":["collection","custom-element","custom-elements","html-template","javascript","library","native","shadow-dom","typescript","web-component","web-components"],"created_at":"2024-09-24T19:57:50.451Z","updated_at":"2025-10-23T14:31:16.625Z","avatar_url":"https://github.com/soywod.png","language":"TypeScript","funding_links":["https://patreon.com/soywod","https://opencollective.com/soywod"],"categories":[],"sub_categories":[],"readme":"# ⚗️ Catalyx [![Build Status](https://travis-ci.org/soywod/catalyx.svg?branch=master)](https://travis-ci.org/soywod/catalyx) [![npm](https://img.shields.io/npm/v/catalyx?label=npm)](https://www.npmjs.com/package/catalyx)\n\nCatalyx is a collection of native web components:\n\n✔ based on **Web Components** standards\u003cbr\u003e\n✔ written in pure **JavaScript**\u003cbr\u003e\n✔ lightweight, performant and customizable\u003cbr\u003e\n\n*Live demo at https://catalyx.soywod.me.*\n\n## Table of contents\n\n- [Roadmap to `v1`](#roadmap-to-v1)\n- [Buttons](#buttons)\n  - [Button](#button)\n  - [Switch](#switch)\n  - [Choice](#choice)\n- [Fields](#fields)\n  - Text based\n    - [Text](#text)\n    - [Email](#email)\n    - [Tel](#tel)\n    - [URL](#url)\n    - [Password](#password)\n    - [Phone](#phone)\n  - Number based\n    - [Integer](#integer)\n    - [Float](#float)\n    - [Currency](#currency)\n- [Pickers](#pickers)\n  - [Date](#date)\n  - [Select](#select)\n  - [File](#file)\n- [Dialogs](#dialogs)\n  - [Tooltip](#tooltip)\n  - [Toast](#toast)\n  - [Modal](#modal)\n- [Layouts](#layouts)\n  - [Heading](#heading)\n  - [Form](#form)\n  - [Router](#router)\n- [Changelog](https://github.com/soywod/catalyx/blob/master/CHANGELOG.md)\n- [License](https://github.com/soywod/catalyx/blob/master/LICENSE)\n\n## Roadmap to `v1`\n\n- [ ] Buttons\n  - [X] Button\n  - [X] Switch\n  - [ ] Choice\n- [X] Fields\n  - [X] Text based\n    - [X] Text\n    - [X] Email\n    - [X] Tel\n    - [X] URL\n    - [X] Password\n    - [X] Phone\n  - [X] Number based\n    - [X] Integer\n    - [X] Float\n    - [X] Currency\n- [X] Pickers\n  - [X] Date\n  - [X] Select\n  - [X] File\n- [ ] Dialogs\n  - [X] Tooltip\n  - [X] Toast\n  - [ ] Modal\n- [X] Layouts\n  - [X] Heading\n  - [X] Form\n  - [X] Router\n\n## Buttons\n### Button\n## Fields\n### Text\n\nControl for entering a single or multiple lines of text.\n\n#### Usage\n\n```html\n\u003ccx-text-field\u003e\u003c/cx-text-field\u003e\n```\n\n#### Attributes\n\nAccept all `\u003cinput type=\"text\"\u003e` attributes.\n\n### Email\n\nControl for entering an email. Extends [Text field](#text).\n\n#### Usage\n\n```html\n\u003ccx-email-field\u003e\u003c/cx-email-field\u003e\n```\n\n#### Attributes\n\nAccept all `\u003cinput type=\"email\"\u003e` attributes.\n\n### Password\n\nControl for entering a password. Extends [Text field](#text). The password can be\nshown or hidden with the toggler on the right side.\n\n#### Usage\n\n```html\n\u003ccx-password-field\u003e\u003c/cx-password-field\u003e\n```\n\n#### Attributes\n\nAccept all `\u003cinput type=\"password\"\u003e` attributes.\n\n### Integer\n\nControl for entering an integer. The value can be incremented and decremented via the input (right buttons), via the keyboard (top and bottom arrow), and via the mouse (wheel).\n\n#### Usage\n\n```html\n\u003ccx-integer-field\u003e\u003c/cx-integer-field\u003e\n```\n\n#### Attributes\n\nAccept all `\u003cinput type=\"number\"\u003e` attributes.\n\n### Float\n\nControl for entering a float.\n\n#### Usage\n\n```html\n\u003ccx-float-field\u003e\u003c/cx-float-field\u003e\n```\n\n### Currency\n\nControl for entering a currency.\n\n#### Usage\n\n```html\n\u003ccx-currency-field\u003e\u003c/cx-currency-field\u003e\n```\n\n### Date picker\n\nControl for picking a date based on [`Popper`](https://popper.js.org/) positionning engine.\n\n#### Usage\n\n```html\n\u003ccx-date-picker\u003e\u003c/cx-date-picker\u003e\n```\n\n#### Attributes\n\n#### Properties\n\n#### Events\n\nName|Description|Example\n---|---|---\n`change`|Called when the date changes. Date available in `evt.detail.date`.|`elem.addEventListener(\"change\", handler)`\n\n## Tooltip\n\nText popup tip based on [`Popper`](https://popper.js.org/) positionning engine.\n\n#### Usage\n\n```html\n\u003ccx-tooltip title=\"Tooltip\"\u003e\n  \u003cbutton\u003eHover me\u003c/button\u003e\n\u003c/cx-tooltip\u003e\n```\n\n#### Attributes\n\nName|Description|Example\n---|---|---\n`title`|Tooltip title initializer.|`\u003ccx-tooltip title=\"Text tip\"\u003e`\n`placement`|Tooltip position initializer. Possible values: \u003ccode\u003etop\u003c/code\u003e (default), \u003ccode\u003ebottom\u003c/code\u003e, \u003ccode\u003eright\u003c/code\u003e, \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003etop-start\u003c/code\u003e, \u003ccode\u003etop-end\u003c/code\u003e, \u003ccode\u003ebottom-start\u003c/code\u003e, \u003ccode\u003ebottom-end\u003c/code\u003e, \u003ccode\u003eright-start\u003c/code\u003e, \u003ccode\u003eright-end\u003c/code\u003e, \u003ccode\u003eleft-start\u003c/code\u003e, \u003ccode\u003eleft-end\u003c/code\u003e, \u003ccode\u003eauto\u003c/code\u003e, \u003ccode\u003eauto-start\u003c/code\u003e, \u003ccode\u003eauto-end\u003c/code\u003e|`\u003ccx-tooltip placement=\"right\"\u003e`\n\n#### Properties\n\nName|Description|Example\n---|---|---\n`title`|Tooltip title setter.|`elem.title = \"New tooltip\"`\n`placement`|Tooltip position setter. Same possible values as `placement` attribute.|`elem.placement = \"bottom\"`\n\n## Links\n\n- [CSS `::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\n- [Various way of styling a web component](https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/)\n- [Awesome Google doc about Web Components](https://developers.google.com/web/fundamentals/web-components)\n- [List of HTML colors](https://en.wikipedia.org/wiki/Web_colors)\n- [Web Components and SEO](https://medium.com/patternfly-elements/web-components-and-seo-58227413e072)\n- [List of HTML5 inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Labels_and_placeholders)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoywod%2Fcatalyx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoywod%2Fcatalyx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoywod%2Fcatalyx/lists"}