v20.3.0

* Quick prettier update

* Quick version update

* Running `ng update @angular/cli`

* Running `ng update @angular/core`

* Quick peer dep updates

* Running `ng update @angular/material`

* Running `ng update angular-eslint`

* Fix up all vulns

* README updates

* Update workflows

* Cleanup

* Package scripts updates

* package.json updates

* Update package-lock

Author: CodyTolene

.github/FUNDING.yml

@@ -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']

.github/images/screenshots/.gitkeep

@@ -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 }}

.github/images/screenshots/screenshot.png

@@ -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

.github/workflows/on-merge-main-deploy-gpr.yml

@@ -1,5 +1,7 @@
 name: 'Verify Pull Request'
+
 on: pull_request
+
 jobs:
   verify_pull_request:
     runs-on: ubuntu-latest
@@ -16,4 +18,4 @@ jobs:
       - name: Build 🔧
         run: |
           npm run build:prod
-          npm run build:package
+          npm run npm-build-package

.github/workflows/on-merge-main-deploy-npmjs.yml

@@ -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

.github/workflows/verify-pull-request.yml

@@ -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
@@ -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**
 
@@ -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
@@ -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:
@@ -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                         |
 | --------------- | -------------------- | ------------------------------- |
@@ -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]
@@ -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