{"id":13637420,"url":"https://github.com/tiaguinho/material-community-components","last_synced_at":"2025-04-12T18:42:49.383Z","repository":{"id":28579850,"uuid":"116826754","full_name":"tiaguinho/material-community-components","owner":"tiaguinho","description":":panda_face: Angular Material Components created from the community","archived":false,"fork":false,"pushed_at":"2023-03-09T03:21:00.000Z","size":7600,"stargazers_count":322,"open_issues_count":32,"forks_count":50,"subscribers_count":20,"default_branch":"main","last_synced_at":"2024-04-14T10:09:12.098Z","etag":null,"topics":["angular","angular-components","angular-material2","colorpicker","community","material","scrollspy","speed-dial","timerpicker","typescript"],"latest_commit_sha":null,"homepage":"https://tiaguinho.github.io/material-community-components","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/tiaguinho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["tiaguinho"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2018-01-09T14:30:54.000Z","updated_at":"2024-02-03T14:46:32.000Z","dependencies_parsed_at":"2023-02-18T03:15:42.181Z","dependency_job_id":null,"html_url":"https://github.com/tiaguinho/material-community-components","commit_stats":{"total_commits":593,"total_committers":21,"mean_commits":"28.238095238095237","dds":"0.33558178752107926","last_synced_commit":"99335491bbd0d191cd95c4fe03bf4df9e6064e0e"},"previous_names":["tiaguinho/mat-color-picker"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaguinho%2Fmaterial-community-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaguinho%2Fmaterial-community-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaguinho%2Fmaterial-community-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiaguinho%2Fmaterial-community-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiaguinho","download_url":"https://codeload.github.com/tiaguinho/material-community-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248617125,"owners_count":21134190,"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":["angular","angular-components","angular-material2","colorpicker","community","material","scrollspy","speed-dial","timerpicker","typescript"],"created_at":"2024-08-02T00:01:17.162Z","updated_at":"2025-04-12T18:42:49.360Z","avatar_url":"https://github.com/tiaguinho.png","language":"TypeScript","funding_links":["https://github.com/sponsors/tiaguinho","https://www.patreon.com/temporin"],"categories":["Angular"],"sub_categories":["Frameworks"],"readme":"# Material Community Components\nAngular Material components that are not implemented in official package.\n\n[![npm version](https://badge.fury.io/js/material-community-components.svg)](https://badge.fury.io/js/material-community-components)\n[![Travis CI](https://travis-ci.org/tiaguinho/material-community-components.svg?branch=master)](https://travis-ci.org/tiaguinho/material-community-components)\n[![Coverage Status](https://coveralls.io/repos/github/tiaguinho/material-community-components/badge.svg?branch=master)](https://coveralls.io/github/tiaguinho/material-community-components?branch=master)\n[![patreon](https://img.shields.io/badge/patreon-donate-yellow.svg)](https://www.patreon.com/temporin)\n\nThe idea of the [Material Community Components]() is to provide components that aren't available in the [Angular Material2](https://material.angular.io) yet.\n\nAll the components are created using [Angular](https://angular.io), [Material 2](https://material.angular.io) and [CDK](https://material.angular.io/cdk). Since version 7.1.0 only Angular 9+ is supported.\n\nThe color-picker component has an additional peer-dependency to [@thebespokepixel/es-tinycolor](https://github.com/thebespokepixel/es-tinycolor) to help with color calculations.\n\nCheck out our [documentation \u0026 live demo](https://tiaguinho.github.io/material-community-components/)\n\n## Components\n\nAll the components have the prefix `mcc` followed by the package name.\n\n| Component    | Package          | Screenshot    |\n| ------------ | ---------------- | ------------- |\n| Color Picker | mcc-color-picker | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/color-picker.png 'Color Picker') |\n| Scrollspy    | mcc-scrollspy    | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/scrollspy.png 'Scrollspy') |\n| Speed Dial   | mcc-speed-dial   | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/speed-dial.png 'Speed Dial') |\n| Timer Picker | mcc-timer-picker | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/timer-picker.png 'Timer Picker') |\n\nIf you miss any component, please follow the [CONTRIBUTION GUIDELINE](https://github.com/tiaguinho/material-community-components/blob/master/CONTRIBUTING.md) to open an issue or file your idea [here](https://github.com/tiaguinho/material-community-components/discussions/191).\n\n## Install\n\n### step: 1\n\nWe use some components from [Angular Material](https://material.angular.io/). To be able to use this components, you have to install the `@angular/animations`. If you follow all the steps in [Material Guide](https://material.angular.io/guide/getting-started), you already have this step done.\n\n```bash\n    npm install --save @angular/animations\n```\n\nNote: [@angular/animations](https://angular.io/guide/animations) uses the WebAnimation API that isn't supported by all browsers yet. If you want to support Material component animations in these browsers, you'll have to include a [polyfill](https://github.com/web-animations/web-animations-js).\n\n```typescript\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\n\n@NgModule({\n  ...\n  imports: [BrowserAnimationsModule],\n  ...\n})\nexport class PizzaPartyAppModule { }\n```\n\nIf you don't want to add another dependency to your project, you can use the [NoopAnimationsModule](https://angular.io/api/platform-browser/animations/NoopAnimationsModule).\n\n```typescript\nimport {NoopAnimationsModule} from '@angular/platform-browser/animations';\n\n@NgModule({\n  ...\n  imports: [NoopAnimationsModule],\n  ...\n})\nexport class PizzaPartyAppModule { }\n```\n\n### step: 2\n\nInstall material community components package:\n\n```bash\n    npm install material-community-components\n```\n\nor\n\n```bash\n  yarn add material-community-components\n```\n\n## Theming\n\nTo use the same theme of Angular Material add the following code to your ```style.scss```.\n\n```scss\n@use '~@angular/material' as mat;\n@use '~material-community-components/theming' as mcc;\n\n@include mat.core();\n\n// Define the palettes for your theme using the Material Design palettes available in palette.scss\n// (imported above). For each palette, you can optionally specify a default, lighter, and darker\n// hue. Available color palettes: https://material.io/design/color/\n$demo-primary: mat.define-palette(mat.$green-palette);\n$demo-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);\n\n// The warn palette is optional (defaults to red).\n$demo-warn: mat.define-palette(mat.$red-palette);\n\n// Create the theme object (a Sass map containing all of the palettes).\n$demo-theme: mat.define-light-theme($demo-primary, $demo-accent, $demo-warn);\n\n// build angular material theme\n@include mat.all-component-themes($demo-theme);\n\n// pass angular material theme to material community components\n@include mcc.mcc-theme($demo-theme); \n```\n***Right now only ```timer-picker``` and ```speed-dial```*** do support the theme (see [ISSUE-172](https://github.com/tiaguinho/material-community-components/issues/172)).\n\n## Upgrading from 7.x.x\n\nSince version 9.0.0 the lib only provides secondary entry-points for import. To migrate change your imports like that:\n\nBefore:\n```typescript\nimport { MccColorPickerModule} from 'material-community-components';\nimport { MccTimerPickerModule} from 'material-community-components';\nimport { MccSpeedDialModule} from 'material-community-components';\nimport { MccScrollspyModule} from 'material-community-components';\n```\n\nAfter:\n```typescript\nimport { MccColorPickerModule} from 'material-community-components/color-picker';\nimport { MccTimerPickerModule} from 'material-community-components/timer-picker';\nimport { MccSpeedDialModule} from 'material-community-components/speed-dial';\nimport { MccScrollspyModule} from 'material-community-components/scrollspy';\n```\n## How to use\n\nFor more examples, you can see our [demo](https://github.com/tiaguinho/material-community-components/tree/master/projects/demo) folder or read the [documentation](https://tiaguinho.github.io/material-community-components/)\n\n## License\n\n[The MIT License (MIT) Copyright (c) 2018](http://opensource.org/licenses/MIT)\n\n## Sponsors\n\n[![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/sponsor-egoi.png 'E-goi')](https://www.e-goi.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiaguinho%2Fmaterial-community-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiaguinho%2Fmaterial-community-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiaguinho%2Fmaterial-community-components/lists"}