⚡ DOM Library (dom-library-core) — Angular 22 Signal Forms Controls

An enterprise-grade, zero-dependency suite of premium standalone form controls and micro-utilities built natively for Angular 22 using the new Angular Signal Forms (@angular/forms/signals) API. Normalized to an ultra-compact 30px height layout with elegant Tailwind CSS styling, this library is built from the ground up to completely replace @angular/material with zero-overhead, highly accessible, custom elements designed for zoneless change detection.

✨ Outstanding Features

• 📦 Zero External Dependencies: 100% pure Angular + Tailwind CSS. Completely removes bulky material dependencies.
• 📏 Perfect Y-Axis Normalization: Every form control (Inputs, Selects, Dates, Country Codes) compiles to exactly 30px height for pixel-perfect horizontal grid alignments.
• 🎯 Signals-First Architecture: Built natively on top of Angular 22 Zoneless Change Detection and computed Form Control bindings.
• 🇺🇸 Segmented Mobile Country Input: Country flags trigger combined with national digit constraint validations for US, UK, IN, CA, ES, AU.
• 👤 Name Buddy Component: Modular full-name entry handler with dynamic middle-name and salutation configurations.
• 🖼️ Overlays & Carousels: Focus-trapped Dialog modals, multi-directional sliding drawers with custom TemplateRef headers, and hardware-accelerated autoplay carousels.
• 🛠️ Shimmers, Toasts & Tooltips: Floating tooltips, stackable toasts with action callbacks, and shimmering skeleton loading directives.

🛠️ Global Installation & Setup

Integrate DOM Library into any new or existing Angular + Tailwind CSS project:

1. Install Package via NPM

npm install dom-library-core

2. Embed FontAwesome Icons Asset

The library icons require FontAwesome. Add the stylesheet asset link to your build parameters:

npm install @fortawesome/fontawesome-free

Update your angular.json styles stack:

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  "src/styles.css"
]

3. Add Tailwind Content Scanning Path

To preserve specific styling definitions (borders, animations, utility colors) inside the compiled components during production purging, register the module scanning route inside your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,ts}',
    './node_modules/dom-library-core/**/*.{html,js,mjs}', // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

💻 Standalone Import & Usage Example

Since all controls are developed as fully standalone elements, you can import them individually inside your custom features:

TypeScript Wiring (feature.component.ts)

import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import {
  DomInputComponent,
  DomMobileNumberComponent,
  DomNameBuddyComponent,
} from 'dom-library-core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    DomInputComponent,
    DomMobileNumberComponent,
    DomNameBuddyComponent,
  ],
  templateUrl: './feature.component.html',
})
export class UserProfileComponent {
  // Main reactive schema wired with custom validation rules
  readonly profileForm = this.fb.group({
    salutation: ['Mr.'],
    firstName: ['', [Validators.required, Validators.maxLength(30)]],
    middleName: [''],
    lastName: ['', [Validators.required, Validators.maxLength(30)]],
    email: ['', [Validators.required, Validators.email]],
    mobilePhone: ['', [Validators.required]], // Validated according to country code digits!
  });

  constructor(private readonly fb: FormBuilder) {}

  submitForm(): void {
    if (this.profileForm.valid) {
      console.log('Valid Schema Values:', this.profileForm.value);
    }
  }
}

HTML Template (feature.component.html)

<form
  [formGroup]="profileForm"
  (ngSubmit)="submitForm()"
  class="space-y-6 max-w-xl bg-white p-6 rounded-md shadow-sm border border-slate-200"
>
  <!-- Identity Coordinates Header -->
  <dom-name-buddy
    [form_group]="profileForm"
    salutation_control="salutation"
    first_name_control="firstName"
    middle_name_control="middleName"
    last_name_control="lastName"
    [hide_salutation]="false"
    [hide_middle_name]="false"
    label="Identity Coordinates"
  />

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <!-- Email Address Input -->
    <dom-input
      [form_group]="profileForm"
      form_control="email"
      label="Email Coordinates"
      placeholder="[email protected]"
      type="email"
    />

    <!-- Phone Number Select with Country Flags (US, IN, UK, ES, CA, AU) -->
    <dom-mobile-number
      [form_group]="profileForm"
      form_control="mobilePhone"
      label="Mobile Telephone Number"
      default_country="US"
    />
  </div>

  <button
    type="submit"
    class="w-full h-[30px] rounded-md bg-indigo-650 text-white font-bold text-xs hover:bg-indigo-700 transition"
  >
    Submit Profile Data
  </button>
</form>

🚀 Development & Publishing to GitHub

If you want to contribute, test in the sandbox playground, or publish the core library bundle, use these build commands:

Running the Live Sandbox Sandbox Playground

# Install dependencies
npm install

# Start the sandbox development dev server
npm run start

Open your browser and navigate to http://localhost:4300/ to test interactive components inside the premium sandbox playground.

Compile and Package Library Core

The compilation builds the controls into a standalone NPM distribution module located at dist/dom-library-core:

npx ng build dom-library-core --configuration production

Push Code to GitHub

Initialize your repo and push the package directly to GitHub:

# Initialize local repo
git init

# Add files & commit
git add .
git commit -m "feat: initial commit of premium zoneless standalone controls"

# Map origin & push
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/dom-library-core.git
git push -u origin main

Publish compiled folder to NPM

cd dist/dom-library-core
npm publish --access public

📜 MIT Open Source License

This library is licensed under the terms of the MIT License. Feel free to copy, modify, distribute, and implement inside any commercial or open source applications.

Built with ♥ by Omkar & Google DeepMind Angular Migration Team.