chrv-components 1.0.0 → 1.0.2

package/chr-theme.scss

@@ -0,0 +1,97 @@
+@use '@angular/material' as mat;
+@include mat.core();
+
+$StockManager-warn: mat.define-palette(mat.$red-palette);
+
+$chr-primary-map: (
+    50 : #e0e8f2,
+    100 : #b3c5dd,
+    200 : #809fc7,
+    300 : #4d78b1,
+    400 : #265ba0,
+    500 : #003e8f,
+    600 : #003887,
+    700 : #00307c,
+    800 : #002872,
+    900 : #001b60,
+    A100 : #90a5ff,
+    A200 : #5d7cff,
+    A400 : #2a52ff,
+    A700 : #113eff,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #ffffff,
+    A700 : #ffffff,
+  )
+);
+$chr-accent-map: (
+    50 : #e0f2fb,
+    100 : #b3e0f5,
+    200 : #80cbee,
+    300 : #4db6e7,
+    400 : #26a6e1,
+    500 : #0096dc,
+    600 : #008ed8,
+    700 : #0083d3,
+    800 : #0079ce,
+    900 : #0068c5,
+    A100 : #edf5ff,
+    A200 : #badaff,
+    A400 : #87bfff,
+    A700 : #6eb1ff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+$chr-primary: mat.define-palette($chr-primary-map);
+$chr-accent: mat.define-palette($chr-accent-map, A200, A100, A400);
+
+$chr-theme: mat.define-light-theme((
+  color: (
+    primary: $chr-primary,
+    accent: $chr-accent,
+    warn: $StockManager-warn,
+  )
+));
+
+$chr-dark-theme: mat.define-light-theme((
+  color: (
+    primary: $chr-primary,
+      accent: $chr-accent,
+      warn: $StockManager-warn,
+    )
+));
+
+@mixin color($chr-theme) {
+  // Get the color config from the theme.
+  $color-config: mat.get-color-config($chr-theme);
+
+  // Get the primary color palette from the color-config.
+  $primary-palette: map.get($color-config, 'primary');
+  // Get the primary color palette from the color-config.
+  $accent-palette: map.get($color-config, 'accent');
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/chrv-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,15 @@
 {
   "name": "chrv-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "peerDependencies": {
     "@angular/common": "^15.1.0",
-    "@angular/core": "^15.1.0"
+    "@angular/core": "^15.1.0",
+    "@angular/forms": "^15.1.0",
+    "@angular/material": "^15.1.3",
+    "tailwindcss": "^3.2.4"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2015/chrv-components.mjs",
-  "es2020": "fesm2020/chrv-components.mjs",
-  "esm2020": "esm2020/chrv-components.mjs",
-  "fesm2020": "fesm2020/chrv-components.mjs",
-  "fesm2015": "fesm2015/chrv-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/chrv-components.mjs",
-      "es2020": "./fesm2020/chrv-components.mjs",
-      "es2015": "./fesm2015/chrv-components.mjs",
-      "node": "./fesm2015/chrv-components.mjs",
-      "default": "./fesm2020/chrv-components.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.html

@@ -0,0 +1,9 @@
+<div class="w-full flex flex-row flex-wrap dark:!text-gray-400">
+  <div *ngFor="let crumb of crumbs" class="w-fit min-w-fit">
+    <button class="dark:!text-gray-400" [disabled]="!crumb.link && !crumb.callback" mat-button
+      (click)="crumb.callback?.() || crumb.link && navigateTo(crumb.link)">
+      {{ crumb.display }}
+    </button>
+    {{ (crumb.link || crumb.callback) && ">" }}
+  </div>
+</div>

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbComponent } from './chr-breadcrumb.component';
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BreadcrumbComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+export interface Breadcrumb {
+  display: string;
+  link?: string;
+  callback?: Function;
+}
+
+@Component({
+  selector: 'app-chr-breadcrumb',
+  templateUrl: './chr-breadcrumb.component.html',
+  styleUrls: ['./chr-breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent {
+  @Input() crumbs: Breadcrumb[];
+
+  constructor(public router: Router) {}
+
+  navigateTo = (uri: string, data?: any) => {
+    this.router.navigate([uri], { state: data });
+  };
+}

package/src/lib/chr-button/chr-button.component.html

@@ -0,0 +1,20 @@
+<div class="grid">
+  <a mat-button mat-flat-button *ngIf="predicate" [disabled]="disabled" [ngClass]="
+      type == 'full'
+        ? 'grid grid-cols-1 flex-1 self-end content-end items-center justify-center !w-full'
+        : ' '
+    " [ngClass]="type == 'table' ? 'h-14 grid grid-cols-1' : ''"
+    [ngClass]="type == 'fixed' ? 'h-14 grid grid-cols-1 w-36' : ''" color="{{ color }}" (click)="click?.()"
+    [attr.href]="href && href" [attr.target]="target && target" [matTooltip]="tooltip||''"
+    [matTooltipPosition]="tooltipPosition||'above'">
+    {{ display }}
+    <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+  </a>
+</div>
+<!--
+    IF
+    Click
+    color
+    type: table : full  
+    icon
+-->

package/src/lib/chr-button/chr-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChrButtonComponent } from './chr-button.component';
+
+describe('ChrButtonComponent', () => {
+  let component: ChrButtonComponent;
+  let fixture: ComponentFixture<ChrButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChrButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChrButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/chr-button/chr-button.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-chr-button',
+  templateUrl: './chr-button.component.html',
+  styleUrls: ['./chr-button.component.scss'],
+})
+export class ChrButtonComponent {
+  @Input() display: string = '';
+  @Input() icon: string = '';
+  @Input() click?: Function;
+  @Input() color: 'primary' | 'accent' | 'warn' | 'none' = 'none';
+  @Input() predicate?: boolean = true;
+  @Input() type: 'table' | 'full' | 'fixed' | 'none' = 'none';
+  @Input() href?: string;
+  @Input() target: '_blank' | '_parent' | '_self' | '_top';
+  @Input() disabled: boolean = false;
+  @Input() tooltip?: string;
+  @Input() tooltipPosition?:
+    | 'above'
+    | 'below'
+    | 'left'
+    | 'right'
+    | 'before'
+    | 'after';
+
+  constructor() {}
+
+  setDisabled = (is: boolean) => {
+    this.disabled = is;
+  };
+
+  doClick = () => {
+    this.click?.();
+  };
+}

package/src/lib/chr-checkbox/chr-checkbox.component.html

@@ -0,0 +1,4 @@
+<div>
+    <div *ngIf="checked" (click)="check(false)" [class.info]="type=='info'&&!disabled" [class.bg-green-100]="type=='success'&&!disabled" [class.cursor-pointer]="!disabled" [class.bg-grey-400]="disabled" class="box-border rounded-lg p-3 h-12 text-center border-bottom-accent sm:border-none"><div class="flex justify-center items-center"><mat-icon>check-circle</mat-icon></div></div>
+    <div *ngIf="!checked" (click)="check(true)" [class.cursor-pointer]="!disabled" [class.disabled]="disabled" [class.bg-gray-200]="disabled" [class.bg-red-100]="!disabled" class="box-border p-3 h-12 text-center rounded-lg border-bottom-accent sm:border-none"><div class="flex justify-center items-center"><mat-icon>close</mat-icon></div></div>
+</div>

package/src/lib/chr-checkbox/chr-checkbox.component.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@import '../../../styles.scss';
+
+$color-config:    mat.get-color-config($chr-theme);
+$primary-palette: map.get($color-config, 'primary');
+$accent-palette: map.get($color-config, 'accent');
+
+.bg-accent {
+  background-color: mat.get-color-from-palette($accent-palette, A200);
+}
+
+.info {
+    background-color: mat.get-color-from-palette($accent-palette, A200);
+}

package/src/lib/chr-checkbox/chr-checkbox.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChrCheckboxComponent } from './chr-checkbox.component';
+
+describe('ChrCheckboxComponent', () => {
+  let component: ChrCheckboxComponent;
+  let fixture: ComponentFixture<ChrCheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChrCheckboxComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChrCheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/chr-checkbox/chr-checkbox.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-chr-checkbox',
+  templateUrl: './chr-checkbox.component.html',
+  styleUrls: ['./chr-checkbox.component.scss']
+})
+export class ChrCheckboxComponent {
+
+  public checked:boolean = false
+
+  @Input() type:'info'|'success' = 'info'
+
+  @Input() disabled:boolean = false
+
+  @Output() change: EventEmitter<{checked:boolean}> = new EventEmitter<{checked:boolean}>();
+
+  check(end:boolean){
+    if(this.disabled)
+      return
+    if(end){
+      this.checked = true;
+      this.change.emit({checked:true})
+    } else {
+      this.checked = false;
+      this.change.emit({checked:false})
+    }
+  }
+}

package/src/lib/chr-components.module.ts

@@ -0,0 +1,69 @@
+import { PipeModule } from 'chrv-pipes';
+import { NgModule } from '@angular/core';
+import { ChrCheckboxComponent } from './chr-checkbox/chr-checkbox.component';
+import { BreadcrumbComponent } from './chr-breadcrumb/chr-breadcrumb.component';
+import { ChrButtonComponent } from './chr-button/chr-button.component';
+import { ChrSearchSelectComponent } from './chr-search-select/chr-search-select.component';
+import { ChrSearchbarComponent } from './chr-searchbar/chr-searchbar.component';
+import { ChrTableComponent } from './chr-table/chr-table.component';
+import { ChrTableHeaderCellComponent } from './chr-table-header-cell/chr-table-header-cell.component';
+import { ChrFormComponent } from './chr-form/chr-form.component';
+import { ChrSeparatorComponent } from './chr-separator/chr-separator.component';
+import { ChrDeleteModalComponent } from './chr-delete-modal/chr-delete-modal.component';
+import { TypeValidatorDirective } from './chr-form/chr-validators/type-validator';
+import { DecimalValidatorDirective } from './chr-form/chr-validators/decimal-validator';
+import { MaxDateValidatorDirective } from './chr-form/chr-validators/max-date-validator';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule, DatePipe } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
+
+@NgModule({
+  declarations: [
+    ChrCheckboxComponent,
+    BreadcrumbComponent,
+    ChrButtonComponent,
+    ChrSearchSelectComponent,
+    ChrSearchbarComponent,
+    ChrTableComponent,
+    ChrTableHeaderCellComponent,
+    ChrFormComponent,
+    ChrSeparatorComponent,
+    ChrDeleteModalComponent,
+    TypeValidatorDirective,
+    DecimalValidatorDirective,
+    MaxDateValidatorDirective,
+  ],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatButtonModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatTooltipModule,
+    MatDialogModule,
+    PipeModule,
+  ],
+  exports: [
+    ChrCheckboxComponent,
+    BreadcrumbComponent,
+    ChrButtonComponent,
+    ChrSearchSelectComponent,
+    ChrSearchbarComponent,
+    ChrTableComponent,
+    ChrTableHeaderCellComponent,
+    ChrFormComponent,
+    ChrSeparatorComponent,
+    ChrDeleteModalComponent,
+    TypeValidatorDirective,
+    DecimalValidatorDirective,
+    MaxDateValidatorDirective,
+  ],
+  providers: [DatePipe],
+})
+export class ChrComponentsModule {}

package/src/lib/chr-delete-modal/chr-delete-modal.component.html

@@ -0,0 +1,26 @@
+<div class="dark:bg-slate-800">
+    <h2 mat-dialog-title class="dark:!text-gray-400">Supprimer un élément</h2>
+    <mat-dialog-content class="dark:!text-gray-400">
+        Attention:
+        <hr>
+        <br>
+        La suppression d'un élément est irréversible.
+        <hr>
+        <br>
+        Vous allez supprimer un élément et sa référence sera effacée dans toute l'application.
+        <hr>
+        Si d'autres éléments y sont liés, il est possible qu'ils soient supprimés en même temps.
+        <hr>
+        <br>
+        En effectuant cette action et cliquant sur "Confirmer" vous certifiez que vous avez pris connaissance des
+        conséquences possibles et souhaitez tout de même poursuivre.
+
+    </mat-dialog-content>
+    <mat-dialog-actions>
+        <div class="w-full flex flex-row justify-between">
+            <app-chr-button class="w-36" display="Annuler" color="accent" mat-dialog-close></app-chr-button>
+            <app-chr-button class="w-36" display="Confirmer" color="warn" [click]="close"
+                [matTooltip]="'Attention: cette action est irréversible !'" matTooltipPosition="above"></app-chr-button>
+        </div>
+    </mat-dialog-actions>
+</div>

package/src/lib/chr-delete-modal/chr-delete-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChrDeleteModalComponent } from './chr-delete-modal.component';
+
+describe('ChrDeleteModalComponent', () => {
+  let component: ChrDeleteModalComponent;
+  let fixture: ComponentFixture<ChrDeleteModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChrDeleteModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChrDeleteModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/chr-delete-modal/chr-delete-modal.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-chr-delete-modal',
+  templateUrl: './chr-delete-modal.component.html',
+  styleUrls: ['./chr-delete-modal.component.scss'],
+})
+export class ChrDeleteModalComponent {
+  public valid: boolean = false;
+
+  constructor(public dialogRef: MatDialogRef<ChrDeleteModalComponent>) {}
+
+  ngOnInit() {}
+
+  public close = () => {
+    this.dialogRef.close(true);
+  };
+}

package/src/lib/chr-form/chr-form.component.html

@@ -0,0 +1,98 @@
+<div class="flex flex-col justify-center min-h-5/6">
+  <form [formGroup]="form">
+    <fieldset [disabled]="disabled">
+      <div *ngFor="let section of sections; let index = index">
+        <h2 *ngIf="section.title" class="font-bold text-xl">
+          {{ section.title }}
+        </h2>
+        <div class="grid gap-6 mb-6 sm:grid-cols-2">
+          <div *ngFor="let control of section.controls; let index = index" class="relative"
+            [ngClass]="control.width == 'row' ? 'sm:col-span-2' : 'col-span-1'">
+            <label *ngIf="control.label"
+              class="form-control block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{
+              control.label
+              }}
+              <span class="text-red-500" *ngIf="isControlRequired(control)">*</span>
+              :
+            </label>
+            <!-- Here we will *ngIf each type of input cause it's the cleanest way I can imagine-->
+            <!--TEXT-->
+            <input class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? 'bg-red-100 dark:bg-red-800':''"
+              *ngIf="control.type == 'text'" type="text" id="{{ control.name }}_{{ index }}" name="{{ control.name }}"
+              [formControlName]="control.name" placeholder="{{ control.placeholder }}" [(ngModel)]="
+                control.value ? control.value : model && model[control.name]
+              "
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
+            <!--PASSWORD-->
+            <input class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? 'bg-red-100 dark:bg-red-800':''"
+              *ngIf="control.type == 'password'" type="password" id="{{ control.name }}_{{ index }}"
+              name="{{ control.name }}" [formControlName]="control.name" placeholder="{{ control.placeholder }}"
+              [(ngModel)]="
+                control.value ? control.value : model && model[control.name]
+              "
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
+
+            <!--TEXT AREA-->
+            <textarea class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? 'bg-red-100 dark:bg-red-800':''"
+              *ngIf="control.type == 'textArea'" id="{{ control.name }}_{{ index }}" name="{{ control.name }}"
+              [formControlName]="control.name" placeholder="{{ control.placeholder }}" [(ngModel)]="
+                control.value ? control.value : model && model[control.name]
+              "
+              class="h-11 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"></textarea>
+            <!--NUMBER-->
+            <input class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? 'bg-red-100 dark:bg-red-800':''"
+              *ngIf="control.type == 'number'" type="number" id="{{ control.name }}_{{ index }}"
+              name="{{ control.name }}" [formControlName]="control.name" placeholder="{{ control.placeholder }}"
+              [(ngModel)]="
+                control.value ? control.value : model && model[control.name]
+              "
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
+            <!--DATE-->
+            <input class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? 'bg-red-200 dark:bg-red-800':''"
+              *ngIf="control.type == 'date'" type="date" id="{{ control.name }}_{{ index }}" name="{{ control.name }}"
+              [formControlName]="control.name" placeholder="{{ control.placeholder }}" [ngModel]="
+                control.value
+                  ? (control.value | date : 'yyyy-MM-dd')
+                  : (model && model[control.name] | date : 'yyyy-MM-dd')
+              " (ngModelChange)="
+                control.value
+                  ? (control.value = $event)
+                  : (model[control.name] = $event)
+              "
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
+            <!--SearchSelect-->
+            <app-chr-search-select class="relative"
+              [ngClass]="(form.controls[control.name].touched && form.controls[control.name].errors) ? '[&_input]:!bg-red-100 dark:[&_input]:!bg-red-800':''"
+              *ngIf="control.type == 'searchSelect'" id="{{ control.name }}_{{ index }}" [data]="control.data || []"
+              [display]="control.fn!" [placeholder]="control.placeholder" [(model)]="
+                control.value ? control.value : model && model[control.name]
+              " [filters]="control.filters" [formControlName]="control.name"></app-chr-search-select>
+            <span *ngIf="control.icon"
+              [ngClass]="control.iconCallbackDisabled ? 'text-gray-400 dark:text-gray-500':'text-gray-900 dark:text-white'"
+              class="absolute p-2.5 bottom-0 right-0" [matTooltip]="control.iconTooltip || ''"
+              matTooltipPosition="above"
+              (click)="!control.iconCallbackDisabled && control.iconCallback?.(form.controls[control.name].value)"><mat-icon
+                class="flex justify-center align-middle items-center content-center text-lg">{{control.icon}}</mat-icon></span>
+            <div *ngFor="let validation of control.validations" class="h-0">
+              <mat-error *ngIf="
+                  form.controls[control.name].touched &&
+                  form.hasError(validation.rule.toLowerCase(), control.name)
+                ">{{ validation.display }}</mat-error>
+            </div>
+            <span *ngIf="control.span && (!form.controls[control.name].errors || !form.controls[control.name].touched)"
+              class="h-0 text-xs text-gray-600 dark:text-gray-300">{{ control.span
+              }}</span>
+          </div>
+        </div>
+        <div class="py-4" *ngIf="index != sections.length - 1">
+          <hr class="" />
+        </div>
+      </div>
+    </fieldset>
+  </form>
+</div>

package/src/lib/chr-form/chr-form.component.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@import '../../../styles.scss';
+
+$color-config: mat.get-color-config($chr-theme);
+$primary-palette: map.get($color-config, 'primary');
+$accent-palette: map.get($color-config, 'accent');
+
+table {
+    width: 100%;
+}
+
+.mat-column-actions {
+    text-align: right;
+}
+
+.mat-mdc-header-row {
+    background-color: mat.get-color-from-palette($accent-palette, A200);
+}
+
+::ng-deep .arrow-color .mat-sort-header-arrow {
+    color: black;
+}
+
+.bg-primary {
+    background-color: mat.get-color-from-palette($primary-palette);
+}
+
+.bg-accent {
+    background-color: mat.get-color-from-palette($accent-palette, A200);
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+}