Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 3 additions & 31 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -1,32 +1,4 @@
# Displaying a sponsor button in your repository
# https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository

# LFX Mentorship (formerly CommunityBridge)
# https://lfx.linuxfoundation.org/tools/mentorship
community_bridge:
# GitHub Sponsors
# https://github.com/sponsors
github: [ProAngular, CodyTolene]
# IssueHunt
# https://issuehunt.io/
issuehunt:
# Ko-fi
# https://ko-fi.com/
ko_fi:
# Liberapay
# https://en.liberapay.com/
liberapay:
# Open Collective
# https://opencollective.com/
open_collective:
# Otechie
# https://otechie.com/
otechie:
# Patreon
# https://www.patreon.com/
patreon:
# Tidelift
# https://tidelift.com/
tidelift:
# Custom URL
github: [CodyTolene, ProAngular]
buy_me_a_coffee: CodyTolene
patreon: CodyTolene
custom: ['https://www.paypal.me/CodyTolene']
Empty file.
Binary file added .github/images/screenshots/screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 7 additions & 9 deletions .github/workflows/on-merge-main-deploy-gpr.yml
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
# Github Package Deployment
# https://docs.github.com/en/packages
# https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages

name: Verify and Deploy to GitHub Packages

on:
push:
branches:
- main
tags:
- 'v*'

jobs:
deploy_gpr_package:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20.x'
registry-url: 'https://npm.pkg.github.com'
- run: npm ci
- run: npm run build:package
- run: npm run npm-build-package
- run: cd dist/npm && npm publish --access=public
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25 changes: 14 additions & 11 deletions .github/workflows/on-merge-main-deploy-npmjs.yml
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
# npmjs Package Deployment
# https://docs.npmjs.com/about-packages-and-modules

name: Verify and Deploy to npmjs

permissions:
id-token: write
contents: read

on:
push:
branches:
- main
tags:
- 'v*'

jobs:
deploy_npmjs_package:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20.x'
registry-url: 'https://registry.npmjs.org'
- name: Update npm to latest
run: npm install -g npm@latest
- run: npm ci
- run: npm run build:package
- run: cd dist/npm && npm publish --access=public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- run: npm run npm-build-package
- run: cd dist/npm && npm publish
4 changes: 3 additions & 1 deletion .github/workflows/verify-pull-request.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
name: 'Verify Pull Request'

on: pull_request

jobs:
verify_pull_request:
runs-on: ubuntu-latest
Expand All @@ -16,4 +18,4 @@ jobs:
- name: Build 🔧
run: |
npm run build:prod
npm run build:package
npm run npm-build-package
4 changes: 2 additions & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ public/
!eslint.config.js
!package.json
!src/
!src/app/
!src/app/public/
!src/**
!src/**/*

# Re-ignore sub-directories from the above exempt directories:
.github/CODEOWNERS
131 changes: 79 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,97 @@
<div align="center">
<a href="https://www.ProAngular.com" target="_blank">
<img src="https://raw.githubusercontent.com/ProAngular/pro-form/refs/heads/main/public/images/pro-angular-logo.png" />
<img
src="https://raw.githubusercontent.com/ProAngular/pro-form/refs/heads/main/public/images/pro-angular-logo.png"
/>
</a>
<h1 align="center">
<a href="https://www.ProAngular.com" target="_blank">Pro Angular</a>: Form Components
@proangular/pro-form
</h1>
<a href="https://github.com/ProAngular/pro-form" target="_blank">
View Github Repository
</a>
<p align="center">
An abstraction of Angular Material form controls that speeds up form building with drop in, standalone inputs, unified labels, hints, and errors, plus helpers like scroll to first error and focus on invalid. Built for modern Angular and plugs straight into Reactive Forms to cut boilerplate.
<a href="https://www.ProAngular.com" target="_blank">
ProAngular
</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://github.com/ProAngular/pro-form" target="_blank">
GitHub Repo
</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://www.npmjs.com/@proangular/pro-form" target="_blank">
NPM Package
</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://www.ProAngular.com/demos/pro-form" target="_blank">
Demo Page
</a>
</p>
<p align="center">
An abstraction of Angular Material form controls that speeds up form
building with drop in, standalone inputs, unified labels, hints, and
errors, plus helpers like scroll to first error and focus on invalid.
Built for modern Angular and plugs straight into Reactive Forms to cut
boilerplate.
</p>
</div>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

[![npm](https://badgen.net/badge/icon/npm?icon=npm&label)](https://www.npmjs.com/@proangular/pro-form)
[![GitHub](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/ProAngular/pro-form)
[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label)](https://github.com/ProAngular/pro-form/search?l=typescript)
[![npm Version](https://badge.fury.io/js/@proangular%2Fngx-scroll-top.svg)](https://www.npmjs.com/@proangular/pro-form)
[![Node Version](https://badgen.net/npm/node/@proangular/pro-form)](https://www.npmjs.com/@proangular/pro-form)
[![Package Downloads](https://badgen.net/npm/dw/@proangular/pro-form)](https://www.npmjs.com/@proangular/pro-form)
[![Size](https://img.shields.io/bundlephobia/minzip/@proangular/pro-form.svg)](https://bundlephobia.com/result?p=ProAngular/pro-form)
[![Demo Status](https://badgen.net/badge/Demo/Online/green)](https://www.ProAngular.com/demos/pro-form)
[![Website Status](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&label=Website&up_color=green&up_message=Online&url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)
[![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)
[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
[![GitHub Package Status](https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-gpr.yml)
[![npmjs Package Status](https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-npmjs.yml)
<p align="center">
<a href="https://www.npmjs.com/@proangular/pro-form" target="_blank">
<img src="https://badge.fury.io/js/@proangular%2Fpro-form.svg" >
</a>
<a href="https://bundlephobia.com/result?p=ProAngular/pro-form" target="_blank">
<img src="https://img.shields.io/bundlephobia/minzip/@proangular/pro-form.svg" >
</a>
<a href="/LICENSE" target="_blank">
<img src="https://img.shields.io/npm/l/express.svg?maxAge=2592000" >
</a>
</p>

<!--
<p align="center">
<a href="https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-gpr.yml" target="_blank">
<img src="https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg" >
</a>
<a href="https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-npmjs.yml" target="_blank">
<img src="https://github.com/ProAngular/pro-form/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg" >
</a>
</p>
-->

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Index <a name="index"></a>

- [Preview](#preview)
- [Description](#description)
- [Installation](#installation)
- [Prerequisites](#prerequisites)
- [Install Pro Form Components](#install-pro-form-components)
- [Usage](#usage)
- [Compatibility](#compatibility)
- [Development](#development)
- [Licensing](#licensing)
- [Wrapping Up](#wrapping-up)
<p align="center">
<code>ng add @proangular/pro-form</code>
</p>
<p align="center">
<img src=".github/images/screenshots/screenshot.png" />
</p>
<p align="center">
<a href="https://www.ProAngular.com/demos/pro-form" target="_blank">Click here to preview it live!</a>
</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Preview <a name="preview"></a>

Preview the live demo below to see the Pro Form Components in action:

https://www.ProAngular.com/demos/pro-form
## 📇 Index <a name="index"></a>

<p align="right">[ <a href="#index">Index</a> ]</p>
- [📄 Description](#description)
- [📦 Installation](#installation)
- [📋 Prerequisites](#prerequisites)
- [📥 Install Pro Form Components](#install-pro-form-components)
- [💻 Usage](#usage)
- [🔄 Compatibility](#compatibility)
- [🔨 Development](#development)
- [⚖️ Licensing](#licensing)
- [🏁 Wrapping Up](#wrapping-up)

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Description <a name="description"></a>
## 📄 Description <a name="description"></a>

This project provides a collection of custom, reactive form components built
upon Angular Material. Designed for seamless integration into any Angular
Expand Down Expand Up @@ -106,18 +133,18 @@ Each component is designed to be easily customized and extended to meet your
specific needs. They are built using Angular Material and Angular CDK, ensuring
that they are accessible, responsive, and performant.

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Installation <a name="installation"></a>
## 📦 Installation <a name="installation"></a>

Using Node Package Manager ([NPM][url-node-js]) in a new terminal window run the
following commands to install the required dependencies.

### Prerequisites <a name="prerequisites"></a>
### 📋 Prerequisites <a name="prerequisites"></a>

**Angular Material**

Expand All @@ -128,7 +155,7 @@ https://material.angular.io/guide/theming
ng add @angular/material
```

### Install Pro Form Components <a name="install-pro-form-components"></a>
### 📥 Install Pro Form Components <a name="install-pro-form-components"></a>

```bash
ng add @proangular/pro-form@latest
Expand All @@ -140,13 +167,13 @@ or
npm install @proangular/pro-form --save
```

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Usage <a name="usage"></a>
## 💻 Usage <a name="usage"></a>

Import one or all of the following custom form components to use in your Angular
application where used:
Expand Down Expand Up @@ -231,13 +258,13 @@ application where used:
> ![Info][img-info] See an the example form code [here][url-example-form-code],
> or a live demo [here][url-demo].

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Compatibility <a name="compatibility"></a>
## 🔄 Compatibility <a name="compatibility"></a>

| Angular version | @proangular/pro-form | Install |
| --------------- | -------------------- | ------------------------------- |
Expand All @@ -246,13 +273,13 @@ application where used:
| v18 | ------ | Untested |
| v17 | ------ | Untested |

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Development <a name="development"></a>
## 🔨 Development <a name="development"></a>

Please submit all issues, and feature requests here:
[https://github.com/ProAngular/pro-form/issues][url-new-issue]
Expand Down Expand Up @@ -281,26 +308,26 @@ Contribution:

Thank you for any and all contributions!

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Licensing <a name="licensing"></a>
## ⚖️ Licensing <a name="licensing"></a>

This project is licensed under the **MIT** License. See the
[LICENSE](LICENSE.md) file for the pertaining license text.

`SPDX-License-Identifier: MIT`

<p align="right">[ <a href="#index">Index</a> ]</p>
<p align="right">[ <a href="#index">🔍 Index</a> ]</p>

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->

## Wrapping Up <a name="wrapping-up"></a>
## 🏁 Wrapping Up <a name="wrapping-up"></a>

Thank you to the entire Angular team and community for such a great framework to
build upon. If you have any questions, please let me know by opening an issue
Expand Down
Loading