master-control 0.2.5 → 0.2.7

package/src/lib/amount-textbox/amount-textbox.component.html

@@ -0,0 +1,69 @@
+<label class="field-lable" *ngIf="field() && field()?.isVisible && field()?.isShowLabel"
+  >{{ field().label
+  }}<span style="color: red" *ngIf="field() && field()?.validators.isRequired"
+    >*</span
+  ></label
+>
+  <mat-form-field class="w-100" appearance="outline" [ngStyle]="{
+'--custom-border-color': field()?.controlStyle?.borderColor ,
+'--custom-border-width': field()?.controlStyle?.borderWidth ,
+'--custom-border-radius': field()?.controlStyle?.borderRadius ,
+'--custom-bg-color': field()?.controlStyle?.background ,
+'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
+'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
+'--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 ,
+}">
+ @if(reactiveFormControlobject()) {
+<input
+      matInput
+      [type]="field()?.controlType"
+      [name]="field()?.fieldName"
+      [id]="field()?.fieldName"
+      autocomplete="none"
+      [placeholder]="field()?.placeHolder"
+      [maxLength]="field()?.validators?.maxLength"
+      [minLength]="field()?.validators?.minLength"
+      [disabled]="field()?.isDisable"
+      [required]="field()?.validators?.isRequired"
+      [pattern]="field()?.validators?.pattern"
+      (input)="onInputChange($event)"
+      (blur)="onInputBlur()"
+      [value]="inputValue"
+      [formControl]="reactiveFormControlobject()"
+    />
+ }@else {
+  <input
+      matInput
+      [type]="field()?.controlType"
+      [name]="field()?.fieldName"
+      [id]="field()?.fieldName"
+      autocomplete="none"
+      [placeholder]="field()?.placeHolder"
+      [maxLength]="field()?.validators?.maxLength"
+      [minLength]="field()?.validators?.minLength"
+      [disabled]="field()?.isDisable"
+      [required]="field()?.validators?.isRequired"
+      [pattern]="field()?.validators?.pattern"
+      (input)="onInputChange($event)"
+      (blur)="onInputBlur()"
+      [value]="inputValue"
+    />
+ }
+
+    <mat-error *ngIf="false">
+      {{ field()?.validators?.requiredMessage }}
+    </mat-error>
+    <span matPrefix class="rupee-symbol px-2">₹</span>
+    <span matSuffix class="me-2 right-amount-text"> ₹ 3.50 L </span>
+  </mat-form-field>

package/src/lib/amount-textbox/amount-textbox.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'lib-amount-textbox',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    CommonModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './amount-textbox.component.html',
+  styleUrl: './amount-textbox.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: AmountTextboxComponent,
+        multi: true
+      }
+    ]
+})
+export class AmountTextboxComponent {
+  constructor(){}
+  field : any = input.required<any>();
+  inputValue: any = null;
+  reactiveFormControlobject : any = input<any>();
+  _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);
+  }
+
+  onInputBlur(): void {
+    this._unTouched();
+  }
+}

package/src/lib/annuity-rate-logo/annuity-rate-logo.component.css

@@ -0,0 +1,9 @@
+.annuity-percent {
+  position: absolute;
+  font-weight: 900;
+  font-size: 12px;
+  transform: translate(31px, 17px);
+}
+.annuity-box {
+  position: relative;
+}

package/src/lib/annuity-rate-logo/annuity-rate-logo.component.html

@@ -0,0 +1,6 @@
+<div>
+  <span class="annuity-box">
+    <span class="annuity-percent">{{ ratePercent }}</span>
+    <img src="https://cdn.godigit.com/retail-life/annuity-rate.svg" alt="" />
+  </span>
+</div>

package/src/lib/annuity-rate-logo/annuity-rate-logo.component.ts

@@ -0,0 +1,13 @@
+import { Component, input, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-annuity-rate-logo',
+  standalone: true,
+  imports: [],
+  templateUrl: './annuity-rate-logo.component.html',
+  styleUrl: './annuity-rate-logo.component.css'
+})
+export class AnnuityRateLogoComponent {
+field: any = input.required<any>();
+@Input() ratePercent: any = '7%';
+}

package/src/lib/autocomplete/autocomplete.component.css

@@ -0,0 +1,240 @@
+.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;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-select-arrow {
+  border-style: solid !important;
+  border-width: 0 2px 2px 0 !important;
+  border-right: 2px solid !important;
+  content: "" !important;
+  display: inline-block !important;
+  padding: 3px !important;
+  transform: rotate(45deg) !important;
+  vertical-align: middle !important;
+  width: unset !important;
+  height: unset !important;
+  color: #444 !important;
+}
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-select-arrow svg {
+  display: none !important;
+}
+::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
+  background: #fff !important;
+}
+::ng-deep div.mat-mdc-select-panel{
+  background: #fff !important;
+}
+::ng-deep .mat-mdc-option.mdc-list-item {
+  background: #fff !important;
+  color: #444 !important;
+  font-weight: 400;
+}
+::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+  color: #ffbb00 !important;
+}
+::ng-deep .mat-mdc-option:focus.mdc-list-item{
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600;
+  color: #444 !important;
+  border-radius: 3px;
+}
+::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600;
+  color: #444 !important;
+  border-radius: 3px;
+}
+::ng-deep .mat-mdc-option.mdc-list-item {
+  background: var(--custom-select-option-background-color, #fff) !important;
+  color: var(--custom-select-option-font-color, #444) !important;
+  font-weight: var(--custom-select-option-font-weight, 400) !important;
+}
+::ng-deep .mat-mdc-option:focus.mdc-list-item {
+  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
+  color: var(--custom-select-option-font-color-focus, #444) !important;
+  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
+  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
+  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
+}
+::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
+  color: var(--custom-select-option-font-color-focus, #444) !important;
+  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
+  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
+  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
+}
+::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
+  font-size: var(--custom-font-size,  12px) !important;
+}
+::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
+  padding: 0px !important;
+  background: #fafafa !important;
+}
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
+  font-size: 12px !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+
+::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
+  padding: 0px !important;
+}
+::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
+  padding: 0px !important
+}
+::ng-deep .mat-mdc-optgroup-label{
+  background: #f5f5f5;
+  color: #444;
+  font-weight: 800;
+}
+
+::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{
+  padding: 0px !important;
+  background: #fff !important;
+}
+ ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600 !important;
+  color: #444 !important;
+  border-radius: 3px;
+ }
+
+ ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
+    color: unset !important;
+}
+
+::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal {
+  display: none !important;
+}
+ ::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder {
+  color: #8f8f8f !important;
+  font-size: 12px !important;
+  vertical-align: sub;
+}
+* {
+  font-family: "mulish" !important;
+}

package/src/lib/autocomplete/autocomplete.component.html

@@ -0,0 +1,61 @@
+  <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-bg-color': field()?.controlStyle?.background ,
+  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
+  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
+  '--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-color-disabled' : field()?.controlStyle?.disableColor ,
+'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
+  }">
+   @if(reactiveFormControlobject()) {
+     <input
+      matInput
+      type="text"
+      [name]="field()?.fieldName"
+      [id]="field()?.fieldName"
+      [matAutocomplete]="auto"
+      (ngModelChange)="filterOptions()"
+      (focus)="filterOptions()"
+      [disabled]="field()?.isDisable"
+      [required]="field()?.validators?.isRequired"
+      [placeholder]="field()?.placeHolder"
+      [value]="inputValue"
+      [formControl]="reactiveFormControlobject()"
+     />
+   }@else {
+     <input
+      matInput
+      type="text"
+      [name]="field()?.fieldName"
+      [id]="field()?.fieldName"
+      [matAutocomplete]="auto"
+      (ngModelChange)="filterOptions()"
+      (focus)="filterOptions()"
+      [disabled]="field()?.isDisable"
+      [required]="field()?.validators?.isRequired"
+      [placeholder]="field()?.placeHolder"
+      [value]="inputValue"
+     />
+   }
+   <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
+  <mat-option *ngFor="let option of filteredOptions" [value]="option.label">
+    {{ option.label }}
+  </mat-option>
+</mat-autocomplete>
+    <mat-error>
+    {{ field().validators.requiredMessage }}
+  </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>

package/src/lib/autocomplete/autocomplete.component.ts

@@ -0,0 +1,85 @@
+import { Component, input } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { CommonModule } from '@angular/common';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatOptionModule } from '@angular/material/core';
+import { MasterControlService } from '../master-control.service';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectChange } from '@angular/material/select';
+@Component({
+  selector: 'lib-autocomplete',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    CommonModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    MatOptionModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './autocomplete.component.html',
+  styleUrl: './autocomplete.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: AutocompleteComponent,
+        multi: true
+      }
+    ]
+})
+export class AutocompleteComponent {
+  constructor(public masterService : MasterControlService) {}
+  field: any = input.required<any>();
+  selectedOption: any = null;
+  filteredOptions:any=[];
+  inputValue: any = null;
+  reactiveFormControlobject : any = input<any>();
+  ngOnInit() {
+    this.filteredOptions = this.field().options;
+  }
+  
+    onChange: any = () => {};
+    onTouched: any = () => {};
+  
+    writeValue(value: any): void {
+      this.inputValue = value;
+    }
+  
+    registerOnChange(fn: any): void {
+      this.onChange = fn;
+    }
+  
+    registerOnTouched(fn: any): void {
+      this.onTouched = fn;
+    }
+  
+    onValueChange(newValue: any): void {
+      this.inputValue = newValue;
+      this.onChange(newValue);
+      this.onTouched();
+    }
+  
+    selectionChanged(event: MatSelectChange) {
+      this.inputValue = event.value;
+      this.onChange(event.value);
+      this.onTouched();
+    }
+    setDisabledState?(isDisabled: boolean): void{};
+
+   filterOptions() {
+    if (!this.selectedOption) {
+      this.filteredOptions = this.field().options;
+      return;
+    }
+    const filterValue = this.selectedOption.toLowerCase();
+    this.filteredOptions = this.field().options.filter((option:any) =>
+      option.label.toLowerCase().includes(filterValue)
+    );
+  }
+
+displayFn(option: any) {
+  return option ? option : '';
+}
+}

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

@@ -0,0 +1,46 @@
+.benefit-card{
+  max-width: 380px;
+  max-height: 92px;
+  border: 1px solid #dadada;
+  padding: 16px;
+  border-radius: 8px;
+}
+.benefit-card{
+  max-width: var(--benefit-card-width, 380px) !important;
+  border-radius: var(--benefit-border-radius, 8px) !important;
+  border-color: var(--benefit-border-color, #dadada) !important;
+  border-width: var(--benefit-border-width, 1px) !important;
+}
+.b1-bold{
+  font-size: 16px;
+  font-weight: 700;
+  color: #444;
+}
+.add-card-button{
+  width: 72px;
+  max-height: 24px;
+  border-radius: 32px;
+  border: 1px solid #ffbb00;
+  padding: 0px 6px 6px 6px;
+  font-weight: 700;
+  font-size: 12px;
+  background: #ffbb00;
+}
+.remove-card-button{
+  width: 84px;
+  max-height: 24px;
+  padding: 0px 6px 6px 6px;
+  border-radius: 24px;
+  border: 0.8px solid #444;
+  background: #fff;
+  font-weight: 700;
+  font-size: 12px;
+}
+.b3-regular{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+}
+* {
+  font-family: "mulish" !important;
+}

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

@@ -0,0 +1,25 @@
+<div
+  class="benefit-card"
+   *ngIf="field() && field()?.isVisible"
+  [ngStyle]="
+{
+    '--benefit-border-width': field()?.controlStyle?.borderWidth,
+    '--benefit-card-width': field()?.controlStyle?.width ,
+    '--benefit-border-radius': field()?.controlStyle?.borderRadius ,
+    '--benefit-border-color': field()?.controlStyle?.borderColor ,
+}"
+>
+  <div class="d-flex justify-content-between">
+    <span class="b1-bold" *ngIf="field()?.isShowLabel">{{ field()?.label }}</span>
+    <button class="add-card-button">+ Add</button>
+    <button class="remove-card-button" *ngIf="false">x Remove</button>
+  </div>
+  <div class="mt-2">
+    <img
+      src="https://cdn.godigit.com/retail-life/tabler_wheelchair.png"
+      alt=""
+    />
+    <span class="b3-regular mx-2">Policy Continuance Benefit on Death</span>
+    <img src="https://cdn.godigit.com/retail-life/info-button-lib.svg" alt="" />
+  </div>
+</div>

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

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

package/src/lib/button/button.component.css

@@ -0,0 +1,24 @@
+.button{
+  height: var(--button-height, 48px) !important;
+  min-width: var(--button-width, 164px) !important;
+  background: var(--button-background, #ffbb00) !important;
+  border-width: var(--button-border-width, 0px) !important;
+  border-color: var(--button-border-color, #fb0) !important;
+  border-style: var(--button-border-style, solid) !important;
+  border-radius: var(--button-border-radius, 8px) !important;
+  font-size: var(--button-font-size, 16px) !important;
+  font-weight: var(--button-font-weight, 800) !important;
+  color: var(--button-text-color, #444) !important;;
+  max-width: fit-content;
+}
+.button-text{
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+}
+.button-text img{
+  margin-top: 3px;
+}
+*{
+    font-family: 'Mulish' !important;
+}

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

@@ -0,0 +1,22 @@
+<Button 
+class="button"
+*ngIf="field() && field()?.isVisible" 
+[ngStyle]="
+{
+    '--button-border-width': field()?.controlStyle?.borderWidth ,
+    '--button-border-color': field()?.controlStyle?.borderColor ,
+    '--button-border-style': field()?.controlStyle?.borderStyle ,
+    '--button-width': field()?.controlStyle?.width ,
+    '--button-font-size': field()?.controlStyle?.fontSize ,
+    '--button-font-weight': field()?.controlStyle?.fontWeight ,
+    '--button-background': field()?.controlStyle?.background ,
+    '--button-border-radius': field()?.controlStyle?.borderRadius ,
+    '--button-text-color': field()?.controlStyle?.color ,
+    '--button-margin': field()?.controlStyle?.margin ,
+}"
+>
+<span class="button-text">
+<img *ngIf="field()?.imageUrl" [src]='field().imageUrl'>
+<span>{{field()?.label}}</span>
+</span>
+</Button>