master-control 0.2.6 → 0.2.7

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

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MasterControlService } from '../master-control.service';
+
+
+@Component({
+  selector: 'lib-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class ButtonComponent {
+  constructor(public masterService : MasterControlService){}
+  field: any = input.required<any>();
+}

package/src/lib/card/card.component.css

@@ -0,0 +1,37 @@
+* {
+  font-family: "mulish" !important;
+}
+
+.endorsement-card{
+  max-height: 94px;
+  border-color: var(--card-border-color , #dadada);
+  border-width: var(--card-border-width , 1px) ;
+  border-style: var(--card-border-style , solid) ;
+  border-radius: var(--card-border-radius , 8px);
+  padding: 12px;
+  max-width: 220px;
+}
+
+.card-label{
+  font-size: var(--card-font-size , 14px);
+  font-weight: var(--card-font-weight , 600);
+  color: var(--card-font-color , #444);
+}
+
+.hr-line{
+  border-top: 1px dashed #DADADA !important;
+  opacity: initial;
+  border-image: repeating-linear-gradient(to right, #DADADA 0 6px, transparent 0px 10px) 1 stretch;
+}
+
+.card-label{
+  font-size: 14px;
+  font-weight: 600;
+  color: #444;
+}
+
+.below-card-text{
+  font-size: 12px;
+  color: #696969;
+  font-weight: 600;
+}

package/src/lib/card/card.component.html

@@ -0,0 +1,24 @@
+  <div class="d-flex gap-5" *ngIf="field() && field()?.isVisible">
+    <div class="endorsement-card" [ngStyle]="{
+    '--card-border-color': field()?.controlStyle?.borderColor ,
+    '--card-border-width': field()?.controlStyle?.borderWidth ,
+    '--card-border-style': field()?.controlStyle?.borderStyle ,
+    '--card-border-radius': field()?.controlStyle?.borderRadius 
+}">
+      <p class="m-0 card-label" [ngStyle]="{
+    '--card-font-size': field()?.controlStyle?.fontSize ,
+    '--card-font-weight': field()?.controlStyle?.fontWeight ,
+    '--card-font-color': field()?.controlStyle?.color ,
+}">Label</p>
+      <hr class="m-0 hr-line mt-1" />
+      <div class="d-flex gap-2 mt-1">
+        <span>
+          <img src="https://cdn.godigit.com/retail-life/Endorsement-add-ons.svg" alt="" />
+        </span>
+        <span>
+          <p class="m-0 card-label">Glow Plus Pure Term</p>
+          <span class="below-card-text">L1234694934</span>
+        </span>
+      </div>
+    </div>
+  </div>

package/src/lib/card/card.component.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css'
+})
+export class CardComponent {
+field: any = input.required<any>();
+}

package/src/lib/checkbox/checkbox.component.css

@@ -0,0 +1,65 @@
+* {
+  font-family: "mulish" !important;
+}
+
+.error-message{
+  color: red;
+} 
+
+::ng-deep .mdc-checkbox__background {
+   border-radius: var(--checkbox-border-radius, 4px) !important;
+}
+
+::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{
+  background-color: var(--checkbox-bg-color , #ffffff) !important;
+  border-color: rgba(0, 0, 0, 0);
+}
+::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background {
+  background-color: var(--checkbox-bg-color , #ffffff) !important;
+  border-color: rgba(0, 0, 0, 0);
+}
+
+::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
+  border-color: var(--checkbox-border-color-focus, #ffbb00) !important;
+  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
+  border-radius: var(--checkbox-border-radius, 4px) !important;
+}
+::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
+  border-color: var(--checkbox-border-color-focus, #ffbb00) !important;
+  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
+  border-radius: var(--checkbox-border-radius, 4px) !important;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after{
+  color: #fff !important;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{
+  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
+  border-radius: var(--checkbox-border-radius, 4px) !important;;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
+  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
+  border-radius: var(--checkbox-border-radius, 4px) !important;;
+}
+::ng-deep .mat-pseudo-checkbox {
+  border: 1px solid #DADADA;
+}
+::ng-deep .checkbox{
+  padding: 4px 8px 3px 0px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+::ng-deep .mat-mdc-checkbox label{
+  font-size: var(--checkbox-font-size , 16px) !important;
+  font-weight: var(--checkbox-font-weight , 700) !important;
+  color: var(--checkbox-font-color , #444) !important;
+  padding: 0px !important;
+  margin-bottom: 2px;
+  font-family: 'Mulish' !important;
+}
+::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{
+  display: none;
+}
+::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark {
+    color: #fff !important;
+}

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

@@ -0,0 +1,23 @@
+<mat-checkbox *ngIf="field() && field()?.isVisible"
+  [name]="field()?.fieldName"
+  [id]="field()?.fieldName"
+  [disabled]="field()?.isDisable"
+  [required]="field()?.validators?.isRequired"
+  [checked]="inputValue"
+  (change)="onCheckboxChange($event)"
+   [ngStyle]="
+{
+    '--checkbox-border-radius': field()?.controlStyle?.borderRadius,
+    '--checkbox-bg-color': field()?.controlStyle?.background ,
+    '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+    '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground ,
+    '--checkbox-font-size': field()?.controlStyle?.fontSize ,
+    '--checkbox-font-weight': field()?.controlStyle?.fontWeight ,
+    '--checkbox-font-color': field()?.controlStyle?.color ,
+}"
+>
+{{ field()?.label }}
+</mat-checkbox>
+<div class="error-message" *ngIf="false">
+    {{field()?.validators?.isRequiredMessage}}.
+</div>

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

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MasterControlService } from '../master-control.service';
+
+
+@Component({
+  selector: 'lib-checkbox',
+  standalone: true,
+  imports: [CommonModule , MatCheckboxModule, ReactiveFormsModule],
+  templateUrl: './checkbox.component.html',
+  styleUrl: './checkbox.component.css',
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: CheckboxComponent,
+        multi: true
+      }
+    ]
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  constructor(public masterService : MasterControlService){}
+  field: any = input.required<any>();
+
+  inputValue: any = null;
+  _onChange: any = (inputValue:any) => {};
+  _unTouched: any = () => {};
+
+  writeValue(obj: any): void{
+    this.inputValue=obj;
+  };
+  registerOnChange(fn: any): void{
+    this._onChange = fn;
+  };
+  registerOnTouched(fn: any): void{
+    this._unTouched = fn;
+  };
+  setDisabledState?(isDisabled: boolean): void{};
+
+  onInputChange(event: any): void {
+    this.inputValue = event.target.value;
+    this._onChange(this.inputValue);
+  }
+
+  onCheckboxChange(event: any): void {
+    // const target = event.target as HTMLInputElement;
+    this.inputValue = event.checked;
+    this._onChange(this.inputValue);
+    this._unTouched();
+    const css = this.field()?.controlStyle;
+  if (event.checked) {
+    document.body.style.setProperty('--custom-checkbox-border-focus', css?.focusBorderColor || '#ffbb00');
+    document.body.style.setProperty('--custom-checkbox-bg-color-focus', css?.focusBackground || '#ffbb00');
+    document.body.style.setProperty('--custom-checkbox-border-radius-checkbox', css?.borderRadius || '4px');
+    document.body.style.setProperty('--custom-font-size', css?.fontSize || '16px');
+    document.body.style.setProperty('--custom-font-weight', css?.fontWeight || '400');
+    document.body.style.setProperty('--custom-font-family', css?.fontFamily || 'Mulish');
+    document.body.style.setProperty('--custom-font-color', css?.color || '#444');
+  } else {
+    document.body.style.setProperty('--custom-border-color-focus', css?.focusBorderColor || '#ddd');
+    document.body.style.setProperty('--custom-bg-color-focus', css?.focusBackground || '#999');
+    document.body.style.setProperty('--custom-border-radius-checkbox', css?.borderRadius || '4px');
+  }
+  }
+
+  onInputBlur(): void {
+    this._unTouched();
+  }
+}

package/src/lib/discount/discount.component.css

@@ -0,0 +1,45 @@
+* {
+  font-family: "mulish" !important;
+}
+
+.discount-label{
+  color: #ECAF07;
+  background: #FFFBE5;
+}
+.discount-card{
+  max-height: 100px;
+  max-width: 346px;
+  border: 1px solid #ECECEC;
+  box-shadow: 0px 2px 15px 2px #E3E6EC99;
+  border-radius: 8px;
+  padding: 12px 16px 12px 16px;
+  letter-spacing: 0px;
+}
+.discount-card{
+  max-width: var(--discount-card-width, 346px) !important;
+  border-radius: var(--discount-border-radius, 8px) !important;
+  border-color: var(--discount-border-color, #ECECEC) !important;
+  border-width: var(--discount-border-width, 1px) !important;
+}
+
+.h2-extrabold{
+  font-size: 20px;
+  font-weight: 800;
+  color: #444;
+}
+.b3-regular{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+}
+.apply-btn{
+  background: #ffbb00;
+  max-width: 78px;
+  max-height: 24px;
+  border-radius: 32px;
+  padding: 0px 12px 4px 12px;
+  border: 1px solid #ffbb00;
+  font-size: 12px;
+  font-weight: 700;
+  color: #000;
+}

package/src/lib/discount/discount.component.html

@@ -0,0 +1,51 @@
+<p
+  class="discount-label b2-bold px-1"
+  *ngIf="field() && field()?.isVisible && field()?.isShowLabel"
+>
+  {{ field()?.label }}
+</p>
+<div 
+class="discount-card" 
+*ngIf="field() && field()?.isVisible"
+[ngStyle]="
+{
+    '--discount-border-width': field()?.controlStyle?.borderWidth,
+    '--discount-card-width': field()?.controlStyle?.width ,
+    '--discount-border-radius': field()?.controlStyle?.borderRadius ,
+    '--discount-border-color': field()?.controlStyle?.borderColor ,
+}"
+>
+  <div class="d-flex justify-content-between">
+    <div>
+      <img
+        src="https://cdn.godigit.com/retail-life/discount-img-lib.svg"
+        alt=""
+        class="mx-1"
+      />
+      <span class="h2-extrabold">5% </span>
+      <span class="b3-regular">off</span>
+    </div>
+    <div>
+      <button class="apply-btn">
+        <span class="my-1">
+          Apply
+          <img
+            src="https://cdn.godigit.com/retail-life/arrow_forward_lib.svg"
+            alt=""
+          />
+        </span>
+      </button>
+    </div>
+    <div *ngIf="false">
+      <button class="remove-btn">
+        <span> Remove x </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <p class="b2-bold m-0">Good Health Discount</p>
+    <p class="b3-regular">
+      Get extra 5% discount for keeping a healthy lifestyle!
+    </p>
+  </div>
+</div>

package/src/lib/discount/discount.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-discount',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './discount.component.html',
+  styleUrl: './discount.component.css'
+})
+export class DiscountComponent {
+  field: any = input.required<any>();
+
+}

package/src/lib/discount-v2/discount-v2.component.css

@@ -0,0 +1,34 @@
+.discount-card-v2{
+ border-width: var(--discount-design-border-width , 1px);
+ border-color: var(--discount-design-border-color , #0BB68B);
+ border-style: var(--discount-design-border-style , solid) ;
+ width: var(--discount-design-width , fit-content);
+ border-radius: var(--discount-design-border-radius , 8px);
+ box-shadow: 0px 2px 15px 2px rgba(227, 230, 236, 0.6);
+ background: var(--discount-design-bg , #fff);
+}
+.discount-heading{
+ font-weight: var(--discount-heading-font-weight , 700);
+ font-size: var(--discount-heading-font-size , 12px);
+ color: var(--discount-heading-font-color , #444);
+}
+.discount-btn-remove{
+ border-radius: 32px;
+ border: 1px solid #EE0000;
+ background-color: white;
+ font-size: 12px;
+ font-weight: 700;
+ color: #EE0000;
+ display: flex;
+ background: #fff;
+}
+.remove-btn-cross{
+ font-size: 12.5px !important;
+ transform: translate(0px, 2px);
+}
+*{
+    font-family: 'Mulish' !important;
+}
+.material-icons{
+  font-family: 'Material Icons' !important;
+}

package/src/lib/discount-v2/discount-v2.component.html

@@ -0,0 +1,20 @@
+<div class="px-3 py-2 discount-card-v2" *ngIf="field() && field()?.isVisible" [ngStyle]="
+{
+    '--discount-design-border-width': field()?.controlStyle?.borderWidth,
+    '--discount-design-border-color': field()?.controlStyle?.borderColor ,
+    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,
+    '--discount-design-width': field()?.controlStyle?.width ,
+    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,
+    '--discount-design-bg': field()?.controlStyle?.background ,
+}">
+    <div class="mb-2 discount-heading" [ngStyle]="
+{
+    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,
+    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,
+    '--discount-heading-font-color': field()?.controlStyle?.color
+}">{{field()?.label}}</div>
+    <div>
+        <button class="px-2 mt-1 discount-btn-remove"><div>Remove</div> <mat-icon class="pt-1 remove-btn-cross">close</mat-icon></button>
+    </div>
+</div>
+

package/src/lib/discount-v2/discount-v2.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'lib-discount-v2',
+  standalone: true,
+  imports: [MatIconModule , CommonModule],
+  templateUrl: './discount-v2.component.html',
+  styleUrl: './discount-v2.component.css'
+})
+export class DiscountV2Component {
+field: any = input.required<any>();
+}

package/src/lib/dob/dob.component.css

@@ -0,0 +1,117 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.error-message{
+  color: red;
+}
+
+/* focus css for mat-form-field */
+  ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color-focus, #ffbb00) !important;
+  border-width: var(--custom-border-width-focus, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field {
+ background-color: var(--custom-bg-color, #ffffff) !important;
+ border-radius: var(--custom-border-radius ,  7px) !important;
+}
+
+/* hover css for mat-form-field */
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__leading {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep   .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__notch {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__trailing {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+/* regular css for mat-form-field */
+ ::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color, #dddddd) !important;
+  border-width: var(--custom-border-width, 1.5px) !important;
+}
+
+/* field css for mat-form-input-field */
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--custom-caret-color, #ffbb00) !important;
+  /* font-size: var(--custom-font-size, 16px) !important; */
+  font-size: 12px !important;
+  font-weight: var(--custom-font-weight, 400) !important;
+  font-family: var(--custom-font-family, 'Mulish') !important;
+  color: var(--custom-font-color, #444444) !important;
+}
+/* Error state for mat-form-field */
+::ng-deep .mat-form-field-invalid
+  .mdc-text-field--outlined .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-form-field-disabled{
+ background: var(--custom-bg-color-disabled, #ECECEC) !important;
+}
+::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
+  color : var(--custom-font-color-disabled, #999999) !important;
+}
+::ng-deep .mdc-label {
+    color: var(--custom-font-color, #444) !important;
+    font-size: var(--custom-font-size, 16px) !important;
+    font-weight: var(--custom-font-weight, 400) !important;
+    font-family: var(--custom-font-family, 'Mulish') !important;
+}
+::placeholder {
+  color: #8f8f8f !important;
+  font-size: 12px !important;
+}
+::ng-deep .mat-mdc-form-field-hint-wrapper{
+  padding: 0px !important;
+ }
+::ng-deep .mat-mdc-form-field-error-wrapper{
+  padding: 0px !important;
+ }
+ ::ng-deep .mat-mdc-form-field-error{
+  color: #EE0000 !important;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Mulish" !important;
+  letter-spacing: 0;
+ }
+::ng-deep .mdc-text-field--outlined {
+  --mdc-outlined-text-field-container-shape: var(--custom-border-radius ,  7px) !important;
+}
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+* {
+  font-family: "mulish" !important;
+}

package/src/lib/dob/dob.component.html

@@ -0,0 +1,88 @@
+<label
+  *ngIf="field() && field()?.isVisible && field().isShowLabel"
+  class="field-lable"
+  >{{ field()?.label
+  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
+    >*</span
+  ></label
+>
+<mat-form-field
+  class="w-100"
+  appearance="outline"
+  *ngIf="field() && field()?.isVisible"
+  [ngStyle]="{
+    '--custom-border-color': field()?.controlStyle?.borderColor ,
+    '--custom-border-width': field()?.controlStyle?.borderWidth ,
+    '--custom-border-radius': field()?.controlStyle?.borderRadius ,
+    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
+    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
+    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
+    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
+    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
+    '--custom-font-size': field()?.controlStyle?.fontSize ,
+    '--custom-font-weight': field()?.controlStyle?.fontWeight ,
+    '--custom-font-family': field()?.controlStyle?.fontFamily ,
+    '--custom-font-color': field()?.controlStyle?.color ,
+    '--custom-caret-color': field()?.controlStyle?.caretColor ,
+    '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
+    '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
+    '--custom-bg-color': field()?.controlStyle?.background ,
+     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
+    }"
+>
+  @if(reactiveFormControlobject()) {
+  <input
+    matInput
+    autocomplete="none"
+    type="text"
+    [name]="field()?.fieldName"
+    [id]="field()?.fieldName"
+    [placeholder]="field()?.placeHolder"
+    [required]="field()?.validators?.isRequired"
+    [pattern]="field()?.validators?.pattern"
+    [matDatepicker]="picker"
+    (keyup)="dateDivisionFormat($event)"
+    [disabled]="field()?.isDisable"
+    (dateChange)="onInputChange($event)"
+    (blur)="onInputBlur($event)"
+    [value]="inputValue"
+    [formControl]="reactiveFormControlobject()"
+  />
+  }@else {
+  <input
+    matInput
+    autocomplete="none"
+    type="text"
+    [name]="field()?.fieldName"
+    [id]="field()?.fieldName"
+    [placeholder]="field()?.placeHolder"
+    [required]="field()?.validators?.isRequired"
+    [pattern]="field()?.validators?.pattern"
+    [matDatepicker]="picker"
+    (keyup)="dateDivisionFormat($event)"
+    [disabled]="field()?.isDisable"
+    (dateChange)="onInputChange($event)"
+    (blur)="onInputBlur($event)"
+    [value]="inputValue"
+  />
+  }
+
+  <mat-datepicker-toggle matSuffix [for]="picker" *ngIf="false">
+    <img
+      src="https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg"
+      style="width: 16px"
+      matDatepickerToggleIcon
+    />
+  </mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+  <mat-error *ngIf="false">
+    {{ field()?.validators?.isRequiredMessage }}
+  </mat-error>
+</mat-form-field>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.isRequiredMessage }}.
+</div>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.patternMessage }}.
+</div>