diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.html b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.html
new file mode 100644
index 0000000..46671eb
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.html
@@ -0,0 +1,813 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Basicp1</a></li>
+</ol>
+<section class="ug-hero">
+  <div class="ug-hero__content">
+    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
+    <div>
+      <h2 class="ug-hero__title">Basicp1</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"> 
+    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>
+      <span class="ug-btn-text">ADD</span>
+    </button>
+   
+  </div>
+</section>
+
+
+<div class="ug-toolbar">
+  <div class="ug-toolbar__left">
+    <div class="ug-search">
+      <clr-icon shape="search"></clr-icon>
+      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
+    </div>
+  </div>
+  <div class="ug-toolbar__right">
+    <div class="ug-view-toggle">
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
+        <clr-icon shape="view-cards"></clr-icon>
+      </button>
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <clr-icon shape="table"></clr-icon>
+      </button>
+    </div>
+  </div>
+</div> 
+<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+  <clr-dg-placeholder>
+    <ng-template #loadingSpinner>
+      <clr-spinner>LOADING ... </clr-spinner>
+    </ng-template>
+    <div *ngIf="error;else loadingSpinner">{{error}}</div>
+  </clr-dg-placeholder>
+
+
+
+ <clr-dg-column [clrDgField]="'name'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      name
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'name2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      name2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'number1'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      number1
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'number2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      number2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'phone_number'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Phone Number
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'phone_number2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Phone Number2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'paragraph_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Paragraph Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'paragraph_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Paragraph Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+ <clr-dg-column [clrDgField]="'password_field'"> <ng-container *clrDgHideableColumn="{hidden: false}">Password Field
+						 </ng-container></clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'textarea'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Textarea
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'textarea_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Textarea Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'textarea_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Textarea Field2
+    </ng-container>
+  </clr-dg-column>
+
+ 
+ <!-- who column -->
+      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container></clr-dg-column>
+      <!-- end --> 
+  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
+
+<clr-dg-cell>{{user.name }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.name2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.number1 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.number2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.phone_number }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.phone_number2 }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringparagraph_field(user.paragraph_field)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringparagraph_field2(user.paragraph_field2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
+
+
+<clr-dg-cell>{{user.password_field }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringtextarea (user.textarea)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringtextarea_field (user.textarea_field)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringtextarea_field2 (user.textarea_field2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+ 
+  <!-- who column -->
+<clr-dg-cell>
+  <clr-signpost>
+   <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
+   <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+     <h5 style="margin-top: 0">Who Column</h5>
+           <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+           <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+           <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+           <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+           <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+   </clr-signpost-content>
+ </clr-signpost>
+ </clr-dg-cell>
+ 
+ <!-- who colmn --> 
+ 
+ 
+    <clr-dg-action-overflow>
+      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button> -->
+      <button class="ug-action-item" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button>
+      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon>
+ DELETE
+      </button>
+    </clr-dg-action-overflow>
+
+</clr-dg-row>
+
+  <clr-dg-footer class="ug-grid-footer">
+    <clr-dg-pagination #pagination [clrDgPageSize]="10">
+      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+      of {{pagination.totalItems}} Records
+    </clr-dg-pagination>
+  </clr-dg-footer>
+</clr-datagrid>
+
+<div class="ug-cards" *ngIf="viewMode==='cards'">
+  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
+ <div class="ug-card-item__body"> 
+    
+      <div class="ug-kv"><span>name</span><strong>{{user.name}}</strong></div>
+
+
+      <div class="ug-kv"><span>name2</span><strong>{{user.name2}}</strong></div>
+
+
+      <div class="ug-kv"><span>number1</span><strong>{{user.number1}}</strong></div>
+
+
+      <div class="ug-kv"><span>number2</span><strong>{{user.number2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Phone Number</span><strong>{{user.phone_number}}</strong></div>
+
+
+      <div class="ug-kv"><span>Phone Number2</span><strong>{{user.phone_number2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Paragraph Field</span><strong>{{user.paragraph_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Paragraph Field2</span><strong>{{user.paragraph_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Password Field</span><strong>{{user.password_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Textarea</span><strong>{{user.textarea}}</strong></div>
+
+
+      <div class="ug-kv"><span>Textarea Field</span><strong>{{user.textarea_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Textarea Field2</span><strong>{{user.textarea_field2}}</strong></div>
+
+
+ </div>
+    <div class="ug-card-item__footer">
+      
+      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon> Edit
+      </button>
+      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon> Delete
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+<clr-modal [(clrModalOpen)]="rsModalparagraph_field" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+<clr-modal [(clrModalOpen)]="rsModalparagraph_field2" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+
+
+<clr-modal [(clrModalOpen)]="rsModaltextarea" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+<clr-modal [(clrModalOpen)]="rsModaltextarea_field" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+<clr-modal [(clrModalOpen)]="rsModaltextarea_field2" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Basicp1</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+<div class="form-row">
+            <div class="form-col">
+<div class="ug-form-group">
+        <label for="name" class="ug-form-label">name<span class="required-field">*</span></label>
+        <input type="text" id="name" class="ug-form-input" formControlName="name">
+        <div *ngIf="submitted && entryForm.controls.name.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.name.errors.required">*This field is Required</div>
+        </div>
+      </div>
+</div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col">
+<div class="ug-form-group">
+        <label for="name2" class="ug-form-label">name2<span class="required-field">*</span></label>
+        <input type="text" id="name2" class="ug-form-input" formControlName="name2">
+        <div *ngIf="submitted && entryForm.controls.name2.errors" class="ug-form-error">
+          <div *ngIf="submitted && entryForm.controls.name2.errors.required">*This field is Required</div>
+        </div>
+      </div>
+</div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="number1" class="ug-form-label">number1<span class="required-field">*</span></label>
+              <input type="number" id="number1" class="ug-form-input" formControlName="number1" placeholder="Enter number1">
+              <div *ngIf="submitted && entryForm.controls.number1.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.number1.errors.required">*This field is Required</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="number2" class="ug-form-label">number2<span class="required-field">*</span></label>
+              <input type="number" id="number2" class="ug-form-input" formControlName="number2" placeholder="Enter number2">
+              <div *ngIf="submitted && entryForm.controls.number2.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.number2.errors.required">*This field is Required</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="phone_number" class="ug-form-label">Phone Number</label>
+              <input type="text" id="phone_number" class="ug-form-input" formControlName="phone_number" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+              <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="phone_number2" class="ug-form-label">Phone Number2</label>
+              <input type="text" id="phone_number2" class="ug-form-input" formControlName="phone_number2" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+              <div *ngIf="submitted && entryForm.controls['phone_number2'].errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls['phone_number2'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="paragraph_field" class="ug-form-label">Paragraph Field</label>
+              <input type="text" id="paragraph_field" class="ug-form-input" formControlName="paragraph_field" placeholder="Enter paragraph">
+            </div>
+ </div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="paragraph_field2" class="ug-form-label">Paragraph Field2</label>
+              <input type="text" id="paragraph_field2" class="ug-form-input" formControlName="paragraph_field2" placeholder="Enter paragraph">
+            </div>
+ </div>
+            </div>
+
+
+
+        <!-- Password Fields -->
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="password_field" class="ug-form-label">Password Field</label>
+              <div class="password-input-container">
+                <input 
+                  [type]="newaddpHidepassword_field ? 'password' : 'text'" 
+                  id="password_field" 
+                  class="ug-form-input password-input" 
+                  formControlName="password_field" 
+                  placeholder="Enter Password Field"
+                  autocomplete="new-password">
+                <button 
+                  type="button" 
+                  class="password-toggle" 
+                  (click)="newaddChangerpassword_field()" 
+                  [attr.aria-label]="newaddpHidepassword_field? 'Show password' : 'Hide password'">
+                  <clr-icon [attr.shape]="newaddIconpassword_field"></clr-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="confirmpassword_field" class="ug-form-label">Confirm Password Field</label>
+              <input 
+                type="password" 
+                id="confirmpassword_field" 
+                class="ug-form-input" 
+                formControlName="confirmpassword_field" 
+                placeholder="Confirm password"
+                autocomplete="new-password">
+              <div *ngIf="entryForm.controls.confirmpassword_field.errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls.confirmpassword_field.errors.confirmedpassword_fieldValidator">* Password and Confirm Password must match.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="textarea" class="ug-form-label">Textarea</label>
+              <textarea 
+                id="textarea" 
+                class="ug-form-input" 
+                formControlName="textarea" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="textarea_field" class="ug-form-label">Textarea Field</label>
+              <textarea 
+                id="textarea_field" 
+                class="ug-form-input" 
+                formControlName="textarea_field" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="textarea_field2" class="ug-form-label">Textarea Field2</label>
+              <textarea 
+                id="textarea_field2" 
+                class="ug-form-input" 
+                formControlName="textarea_field2" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+
+      <div class="modal-footer">
+        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Basicp1</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+
+
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="name" class="ug-form-label">name<span class="required-field">*</span></label>
+                <input type="text" id="name" class="ug-form-input" [(ngModel)]="rowSelected.name" name="name"
+                  placeholder="Enter name">
+              </div>
+            </div>
+          </div>
+
+
+
+
+
+<div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="name2" class="ug-form-label">name2<span class="required-field">*</span></label>
+                <input type="text" id="name2" class="ug-form-input" [(ngModel)]="rowSelected.name2" name="name2"
+                  placeholder="Enter name2">
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="number1" class="ug-form-label">number1</label>
+                <input type="number" id="number1" class="ug-form-input" [(ngModel)]="rowSelected.number1"
+                  name="number1" placeholder="Enter number1">
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="number2" class="ug-form-label">number2</label>
+                <input type="number" id="number2" class="ug-form-input" [(ngModel)]="rowSelected.number2"
+                  name="number2" placeholder="Enter number2">
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Phone Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="phone_number" class="ug-form-label">Phone Number</label>
+                <input type="text" id="phone_number" class="ug-form-input" [(ngModel)]="rowSelected.phone_number"
+                  name="phone_number" placeholder="+91 Enter 10 digit Mobile Number"
+                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+                <div *ngIf="rowSelected.phone_number && !isValidPhone_number(rowSelected.phone_number)"
+                  class="ug-form-error">
+                  * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Phone Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="phone_number2" class="ug-form-label">Phone Number2</label>
+                <input type="text" id="phone_number2" class="ug-form-input" [(ngModel)]="rowSelected.phone_number2"
+                  name="phone_number2" placeholder="+91 Enter 10 digit Mobile Number"
+                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
+                <div *ngIf="rowSelected.phone_number2 && !isValidPhone_number2(rowSelected.phone_number2)"
+                  class="ug-form-error">
+                  * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+  <!-- Paragraph Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="paragraph_field" class="ug-form-label">Paragraph Field</label>
+                <input type="text" id="paragraph_field" class="ug-form-input"
+                  [(ngModel)]="rowSelected.paragraph_field" name="paragraph_field" placeholder="Enter Paragraph Field">
+              </div>
+            </div>
+            </div>
+
+
+  <!-- Paragraph Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="paragraph_field2" class="ug-form-label">Paragraph Field2</label>
+                <input type="text" id="paragraph_field2" class="ug-form-input"
+                  [(ngModel)]="rowSelected.paragraph_field2" name="paragraph_field2" placeholder="Enter Paragraph Field2">
+              </div>
+            </div>
+            </div>
+
+
+          <!-- Password Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="password_field" class="ug-form-label">Password Field</label>
+                <div class="password-input-container">
+                  <input [type]="newpHidepassword_field ? 'password' : 'text'" id="password_field"
+                    class="ug-form-input password-input" [(ngModel)]="rowSelected.password_field" name="password_field"
+                    placeholder="Enter Password Field">
+                  <button type="button" class="password-toggle" (click)="newShapeChangerpassword_field()"
+                    [attr.aria-label]="newpHidepassword_field ? 'Show password' : 'Hide password'">
+                    <clr-icon [attr.shape]="newIconpassword_field"></clr-icon>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="textarea" class="ug-form-label">Textarea</label>
+                <textarea id="textarea" class="ug-form-input" [(ngModel)]="rowSelected.textarea"
+                  name="textarea" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="textarea_field" class="ug-form-label">Textarea Field</label>
+                <textarea id="textarea_field" class="ug-form-input" [(ngModel)]="rowSelected.textarea_field"
+                  name="textarea_field" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="textarea_field2" class="ug-form-label">Textarea Field2</label>
+                <textarea id="textarea_field2" class="ug-form-input" [(ngModel)]="rowSelected.textarea_field2"
+                  name="textarea_field2" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
+      <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
+    </div>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <div class="ug-delete-header">
+      <div class="ug-delete-icon">
+        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
+      </div>
+      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
+      <p class="ug-delete-subtitle">This action cannot be undone</p>
+    </div>
+
+<div class="ug-delete-details"><div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">name:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.name}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">name2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.name2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">number1:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.number1}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">number2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.number2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Phone Number:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.phone_number}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Phone Number2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.phone_number2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Paragraph Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.paragraph_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Paragraph Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.paragraph_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Password Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.password_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Textarea:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.textarea}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Textarea Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.textarea_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Textarea Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.textarea_field2}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.scss b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.ts
new file mode 100644
index 0000000..ced84d3
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.component.ts
@@ -0,0 +1,630 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Basicp1service} from './Basicp1.service';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
+import { ExtensionService } from 'src/app/services/fnd/extension.service';
+import { DashboardContentModel2 } from 'src/app/models/builder/dashboard'; 
+import { Basicp1cardvariable } from './Basicp1_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { CsvService } from 'src/app/services/csv.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from 'src/app/services/theme.service';
+import { Subscription } from 'rxjs';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Basicp1',
+  templateUrl: './Basicp1.component.html',
+  styleUrls: ['./Basicp1.component.scss']
+})
+export class Basicp1Component implements OnInit {
+  cardButton = Basicp1cardvariable.cardButton;
+  cardmodeldata = Basicp1cardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Basicp1cardvariable.cardButton;
+  cardmodal;  changeView(){
+  this.isCardview = !this.isCardview;
+  }
+    beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+ userrole;
+  rowSelected :any= {};
+  modaldelete=false;
+  modalEdit=false;
+  modalAdd= false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine:any;
+ additionalFieldsFromBackend: any[] = [];
+  formcode = 'Basicp1_formCode'
+tableName = 'Basicp1';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Basicp1service,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+  ) { }
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  } 
+  private editInterval: any;
+// component button 
+  ngOnInit(): void {
+ this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
+      // Theme changes will automatically update CSS variables
+      // This triggers a re-render of themed elements
+    });
+    if(this.cardmodeldata !== ''){
+     this.cardmodal = JSON.parse(this.cardmodeldata);
+    this.dashboardArray = this.cardmodal.dashboard.slice();
+    console.log(this.dashboardArray)
+    }
+    this.userrole=this.userInfoService.getRoles();
+    this.getData();
+    this.entryForm = this._fb.group({
+name : [null],
+
+name2 : [null],
+
+number1 : [null,[Validators.required]],
+
+number2 : [null,[Validators.required]],
+
+phone_number: ['+91'],
+
+phone_number2: ['+91'],
+
+paragraph_field : [null],
+
+paragraph_field2 : [null],
+
+password_field : [null],
+confirmpassword_field : [null],
+
+textarea : [null],
+
+textarea_field : [null],
+
+textarea_field2 : [null],
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    }, {
+        validator: Confirmedpassword_fieldValidator('password_field', 'confirmpassword_field')
+
+
+
+
+
+
+
+  }); // component_button200
+ // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Basicp1_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+ ngOnDestroy(): void {
+ if (this.themeSubscription) {
+      this.themeSubscription.unsubscribe();
+    }
+    if (this.editInterval) {
+      clearInterval(this.editInterval);
+    }
+  }
+  get filteredGroups(): any[] {
+    const items: any[] = (this.product as unknown as any[]) || [];
+    const text = (this.filterText || '').toLowerCase();
+    if (!text) { return items; }
+    return items.filter(g => (
+((g?.name || '').toString()).toLowerCase().includes(text) ||
+
+((g?.name2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.number1 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.number2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.phone_number || '').toString()).toLowerCase().includes(text) ||
+
+((g?.phone_number2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.paragraph_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.paragraph_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.password_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.textarea || '').toString()).toLowerCase().includes(text) ||
+
+((g?.textarea_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.textarea_field2 || '').toString()).toLowerCase().includes(text) 
+
+    ));
+  }
+
+  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
+  onExport() {
+    this.excel.exportAsExcelFile(this.product, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ error; 
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+this.product = [...this.product].reverse(); if(this.product.length==0){
+        this.error="No Data Available"
+     }   
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="Server Error";
+     }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    this.modalEdit = true;
+  }
+   onDelete(row) {
+    this.rowSelected = row;
+     this.modaldelete=true;
+  }
+  delete(id)
+  {
+    this.modaldelete = false;
+    console.log("in delete  "+id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+  if (data) {				      this.toastr.success('Deleted successfully');      }
+    });
+  }
+    onUpdate(id) {
+    this.modalEdit = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  } 
+onCreate() {
+     this.modalAdd=false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  this.mainService.create(this.entryForm.value).subscribe(
+    (data) => {
+      console.log(data);
+  if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Added Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd() {
+this.modalAdd = true; this.submitted = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+ submitted = false;
+onSubmit() {
+  console.log(this.entryForm.value);
+ this.submitted = true;
+  if (this.entryForm.invalid) {
+    return;
+  }this.onCreate();
+
+} 
+
+
+
+
+
+
+
+
+isValidPhone_number(phone: string): boolean {
+  const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
+  return phonePattern.test(phone);
+}
+
+isValidPhone_number2(phone: string): boolean {
+  const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
+  return phonePattern.test(phone);
+}
+
+rsModalparagraph_field = false;  
+ goToReplaceStringparagraph_field (row){
+						    this.rowSelected = row;     this.rsModalparagraph_field  =true;   }
+
+rsModalparagraph_field2 = false;  
+ goToReplaceStringparagraph_field2 (row){
+						    this.rowSelected = row;     this.rsModalparagraph_field2  =true;   }
+
+newpHidepassword_field: boolean = true;
+ newIconpassword_field: string = "eye"; 
+newShapeChangerpassword_field() {
+this.newpHidepassword_field = !this.newpHidepassword_field;  
+ if(this.newpHidepassword_field){
+this.newIconpassword_field = 'eye'   } else {     this.newIconpassword_field = 'eye-hide'   }
+} 
+
+ newaddpHidepassword_field: boolean = true;
+ newaddIconpassword_field: string = "eye";
+newaddChangerpassword_field() {   this.newaddpHidepassword_field = !this.newaddpHidepassword_field;
+ if(this.newaddpHidepassword_field){     this.newaddIconpassword_field = 'eye'   } else {
+  this.newaddIconpassword_field = 'eye-hide'   } }
+
+rsModaltextarea = false;   
+goToReplaceStringtextarea(row){
+this.rowSelected = row;     this.rsModaltextarea  =true;   }
+
+rsModaltextarea_field = false;   
+goToReplaceStringtextarea_field(row){
+this.rowSelected = row;     this.rsModaltextarea_field  =true;   }
+
+rsModaltextarea_field2 = false;   
+goToReplaceStringtextarea_field2(row){
+this.rowSelected = row;     this.rsModaltextarea_field2  =true;   }
+
+
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'usergroupmaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+// updateaction
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export function Confirmedpassword_fieldValidator(controlName: string, matchingControlName: string){
+  return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (matchingControl.errors && !matchingControl.errors.confirmedpassword_fieldValidator) {
+          return;
+      }
+      if (control.value !== matchingControl.value) {
+          matchingControl.setErrors({ confirmedpassword_fieldValidator: true });
+      } else {
+          matchingControl.setErrors(null);
+      }
+  }
+}
+
+
+
+
+
+
+
+
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.service.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.service.ts
new file mode 100644
index 0000000..4258bf3
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Basicp1service{
+  private baseURL = "Basicp1/Basicp1" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// updateaction
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1_cardvariable.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1_cardvariable.ts
new file mode 100644
index 0000000..69dfa6e
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp1/Basicp1_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Basicp1cardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.html b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.html
new file mode 100644
index 0000000..80ade33
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.html
@@ -0,0 +1,552 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Basicp2</a></li>
+</ol>
+<section class="ug-hero">
+  <div class="ug-hero__content">
+    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
+    <div>
+      <h2 class="ug-hero__title">Basicp2</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"> 
+    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>
+      <span class="ug-btn-text">ADD</span>
+    </button>
+   
+  </div>
+</section>
+
+
+<div class="ug-toolbar">
+  <div class="ug-toolbar__left">
+    <div class="ug-search">
+      <clr-icon shape="search"></clr-icon>
+      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
+    </div>
+  </div>
+  <div class="ug-toolbar__right">
+    <div class="ug-view-toggle">
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
+        <clr-icon shape="view-cards"></clr-icon>
+      </button>
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <clr-icon shape="table"></clr-icon>
+      </button>
+    </div>
+  </div>
+</div> 
+<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+  <clr-dg-placeholder>
+    <ng-template #loadingSpinner>
+      <clr-spinner>LOADING ... </clr-spinner>
+    </ng-template>
+    <div *ngIf="error;else loadingSpinner">{{error}}</div>
+  </clr-dg-placeholder>
+
+
+
+ <clr-dg-column [clrDgField]="'about'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      about
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'textarea2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Textarea2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'date_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Date Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'date_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Date Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'datetime_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Datetime Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'datetime_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Datetime Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'email_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Email Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'email_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Email Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+ 
+ <!-- who column -->
+      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container></clr-dg-column>
+      <!-- end --> 
+  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
+
+<clr-dg-cell (click)="goToReplaceStringabout (user.about)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goToReplaceStringtextarea2 (user.textarea2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.date_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.date_field2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.datetime_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.datetime_field2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.email_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.email_field2 }}</clr-dg-cell>
+
+
+
+ 
+  <!-- who column -->
+<clr-dg-cell>
+  <clr-signpost>
+   <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
+   <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+     <h5 style="margin-top: 0">Who Column</h5>
+           <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+           <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+           <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+           <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+           <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+   </clr-signpost-content>
+ </clr-signpost>
+ </clr-dg-cell>
+ 
+ <!-- who colmn --> 
+ 
+ 
+    <clr-dg-action-overflow>
+      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button> -->
+      <button class="ug-action-item" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button>
+      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon>
+ DELETE
+      </button>
+    </clr-dg-action-overflow>
+
+</clr-dg-row>
+
+  <clr-dg-footer class="ug-grid-footer">
+    <clr-dg-pagination #pagination [clrDgPageSize]="10">
+      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+      of {{pagination.totalItems}} Records
+    </clr-dg-pagination>
+  </clr-dg-footer>
+</clr-datagrid>
+
+<div class="ug-cards" *ngIf="viewMode==='cards'">
+  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
+ <div class="ug-card-item__body"> 
+    
+      <div class="ug-kv"><span>about</span><strong>{{user.about}}</strong></div>
+
+
+      <div class="ug-kv"><span>Textarea2</span><strong>{{user.textarea2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Date Field</span><strong>{{user.date_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Date Field2</span><strong>{{user.date_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Datetime Field</span><strong>{{user.datetime_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Datetime Field2</span><strong>{{user.datetime_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Email Field</span><strong>{{user.email_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Email Field2</span><strong>{{user.email_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>UserId Field</span><strong>{{user.userid_field}}</strong></div>
+
+
+ </div>
+    <div class="ug-card-item__footer">
+      
+      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon> Edit
+      </button>
+      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon> Delete
+      </button>
+    </div>
+  </div>
+</div>
+<clr-modal [(clrModalOpen)]="rsModalabout" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+<clr-modal [(clrModalOpen)]="rsModaltextarea2" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+						  <div class="modal-body">
+						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+						  </div></clr-modal>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Basicp2</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="about" class="ug-form-label">about</label>
+              <textarea 
+                id="about" 
+                class="ug-form-input" 
+                formControlName="about" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+
+<div class="form-row">
+            <div class="form-col">
+ <div class="ug-form-group">
+              <label for="textarea2" class="ug-form-label">Textarea2</label>
+              <textarea 
+                id="textarea2" 
+                class="ug-form-input" 
+                formControlName="textarea2" 
+                placeholder="Enter text" 
+                rows="3"></textarea>
+            </div>
+</div>
+            </div>
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="date_field" class="ug-form-label">Date Field</label>
+              <input type="date" id="date_field" class="ug-form-input" formControlName="date_field">
+            </div>
+          </div>
+        </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="date_field2" class="ug-form-label">Date Field2</label>
+              <input type="date" id="date_field2" class="ug-form-input" formControlName="date_field2">
+            </div>
+          </div>
+        </div>
+
+
+<div class="clr-col-sm-12">
+ <label>  Datetime Field</label>
+ <input class="clr-input"  type="datetime-local"  formControlName="datetime_field" />       
+ </div>
+
+<div class="clr-col-sm-12">
+ <label>  Datetime Field2</label>
+ <input class="clr-input"  type="datetime-local"  formControlName="datetime_field2" />       
+ </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="email_field" class="ug-form-label">Email Field</label>
+              <input type="email" id="email_field" class="ug-form-input" formControlName="email_field" placeholder="Enter Email Field">
+              <div *ngIf="entryForm.controls['email_field'].errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls['email_field'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="email_field2" class="ug-form-label">Email Field2</label>
+              <input type="email" id="email_field2" class="ug-form-input" formControlName="email_field2" placeholder="Enter Email Field2">
+              <div *ngIf="entryForm.controls['email_field2'].errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls['email_field2'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+
+      <div class="modal-footer">
+        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Basicp2</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="about" class="ug-form-label">about</label>
+                <textarea id="about" class="ug-form-input" [(ngModel)]="rowSelected.about"
+                  name="about" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="textarea2" class="ug-form-label">Textarea2</label>
+                <textarea id="textarea2" class="ug-form-input" [(ngModel)]="rowSelected.textarea2"
+                  name="textarea2" placeholder="Enter text" rows="3"></textarea>
+              </div>
+            </div>
+           
+
+
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="date_field" class="ug-form-label">Date Field</label>
+              <input type="date" id="date_field" class="ug-form-input" [(ngModel)]="rowSelected.date_field" name="date_field">
+            </div>
+          </div>
+        </div>
+
+
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="date_field2" class="ug-form-label">Date Field2</label>
+              <input type="date" id="date_field2" class="ug-form-input" [(ngModel)]="rowSelected.date_field2" name="date_field2">
+            </div>
+          </div>
+        </div>
+
+<div class="clr-col-sm-12">       
+<label>Datetime Field</label>
+	        <input  class="clr-input"  type="datetime-local" [(ngModel)]="rowSelected.datetime_field" name="datetime_field" />
+	      </div>
+
+<div class="clr-col-sm-12">       
+<label>Datetime Field2</label>
+	        <input  class="clr-input"  type="datetime-local" [(ngModel)]="rowSelected.datetime_field2" name="datetime_field2" />
+	      </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="email_field" class="ug-form-label">Email Field</label>
+              <input type="email" id="email_field" class="ug-form-input" [(ngModel)]="rowSelected.email_field" name="email_field" placeholder="Enter email address">
+              <div *ngIf="rowSelected.email_field && !isValidemail_field(rowSelected.email_field)" class="ug-form-error">
+                * Email must be a valid email address.
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="email_field2" class="ug-form-label">Email Field2</label>
+              <input type="email" id="email_field2" class="ug-form-input" [(ngModel)]="rowSelected.email_field2" name="email_field2" placeholder="Enter email address">
+              <div *ngIf="rowSelected.email_field2 && !isValidemail_field2(rowSelected.email_field2)" class="ug-form-error">
+                * Email must be a valid email address.
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
+      <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
+    </div>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <div class="ug-delete-header">
+      <div class="ug-delete-icon">
+        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
+      </div>
+      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
+      <p class="ug-delete-subtitle">This action cannot be undone</p>
+    </div>
+
+<div class="ug-delete-details"><div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">about:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.about}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Textarea2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.textarea2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Date Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.date_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Date Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.date_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Datetime Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.datetime_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Datetime Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.datetime_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Email Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.email_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Email Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.email_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">UserId Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.userid_field}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.scss b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.ts
new file mode 100644
index 0000000..daa37d6
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.component.ts
@@ -0,0 +1,516 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Basicp2service} from './Basicp2.service';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
+import { ExtensionService } from 'src/app/services/fnd/extension.service';
+import { DashboardContentModel2 } from 'src/app/models/builder/dashboard'; 
+import { Basicp2cardvariable } from './Basicp2_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { CsvService } from 'src/app/services/csv.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from 'src/app/services/theme.service';
+import { Subscription } from 'rxjs';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Basicp2',
+  templateUrl: './Basicp2.component.html',
+  styleUrls: ['./Basicp2.component.scss']
+})
+export class Basicp2Component implements OnInit {
+  cardButton = Basicp2cardvariable.cardButton;
+  cardmodeldata = Basicp2cardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Basicp2cardvariable.cardButton;
+  cardmodal;  changeView(){
+  this.isCardview = !this.isCardview;
+  }
+    beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+ userrole;
+  rowSelected :any= {};
+  modaldelete=false;
+  modalEdit=false;
+  modalAdd= false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine:any;
+ additionalFieldsFromBackend: any[] = [];
+  formcode = 'Basicp2_formCode'
+tableName = 'Basicp2';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Basicp2service,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+  ) { }
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  } 
+  private editInterval: any;
+// component button 
+  ngOnInit(): void {
+ this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
+      // Theme changes will automatically update CSS variables
+      // This triggers a re-render of themed elements
+    });
+    if(this.cardmodeldata !== ''){
+     this.cardmodal = JSON.parse(this.cardmodeldata);
+    this.dashboardArray = this.cardmodal.dashboard.slice();
+    console.log(this.dashboardArray)
+    }
+    this.userrole=this.userInfoService.getRoles();
+    this.getData();
+    this.entryForm = this._fb.group({
+about : [null],
+
+textarea2 : [null],
+
+date_field : [null],
+
+date_field2 : [null],
+
+datetime_field : [null],
+
+datetime_field2 : [null],
+
+email_field : [null,[Validators.required]],
+
+email_field2 : [null,[Validators.required]],
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }); // component_button200
+ // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Basicp2_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+ ngOnDestroy(): void {
+ if (this.themeSubscription) {
+      this.themeSubscription.unsubscribe();
+    }
+    if (this.editInterval) {
+      clearInterval(this.editInterval);
+    }
+  }
+  get filteredGroups(): any[] {
+    const items: any[] = (this.product as unknown as any[]) || [];
+    const text = (this.filterText || '').toLowerCase();
+    if (!text) { return items; }
+    return items.filter(g => (
+((g?.about || '').toString()).toLowerCase().includes(text) ||
+
+((g?.textarea2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.date_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.date_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.datetime_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.datetime_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.email_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.email_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.userid_field || '').toString()).toLowerCase().includes(text) 
+
+    ));
+  }
+
+  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
+  onExport() {
+    this.excel.exportAsExcelFile(this.product, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ error; 
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+this.product = [...this.product].reverse(); if(this.product.length==0){
+        this.error="No Data Available"
+     }   
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="Server Error";
+     }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    this.modalEdit = true;
+  }
+   onDelete(row) {
+    this.rowSelected = row;
+     this.modaldelete=true;
+  }
+  delete(id)
+  {
+    this.modaldelete = false;
+    console.log("in delete  "+id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+  if (data) {				      this.toastr.success('Deleted successfully');      }
+    });
+  }
+    onUpdate(id) {
+    this.modalEdit = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  } 
+onCreate() {
+     this.modalAdd=false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  this.mainService.create(this.entryForm.value).subscribe(
+    (data) => {
+      console.log(data);
+  if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Added Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd() {
+this.modalAdd = true; this.submitted = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+ submitted = false;
+onSubmit() {
+  console.log(this.entryForm.value);
+ this.submitted = true;
+  if (this.entryForm.invalid) {
+    return;
+  }this.onCreate();
+
+} 
+rsModalabout = false;   
+goToReplaceStringabout(row){
+this.rowSelected = row;     this.rsModalabout  =true;   }
+
+rsModaltextarea2 = false;   
+goToReplaceStringtextarea2(row){
+this.rowSelected = row;     this.rsModaltextarea2  =true;   }
+
+
+
+
+
+
+
+
+
+isValidemail_field(email: string): boolean {
+						 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+						    return emailPattern.test(email);   }
+
+isValidemail_field2(email: string): boolean {
+						 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+						    return emailPattern.test(email);   }
+
+
+
+
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'usergroupmaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+// updateaction
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.service.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.service.ts
new file mode 100644
index 0000000..dfd7233
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Basicp2service{
+  private baseURL = "Basicp2/Basicp2" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// updateaction
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2_cardvariable.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2_cardvariable.ts
new file mode 100644
index 0000000..48d7ae9
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp2/Basicp2_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Basicp2cardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.html b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.html
new file mode 100644
index 0000000..e3fc32d
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.html
@@ -0,0 +1,702 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Basicp3</a></li>
+</ol>
+<section class="ug-hero">
+  <div class="ug-hero__content">
+    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
+    <div>
+      <h2 class="ug-hero__title">Basicp3</h2>
+    </div>
+  </div>
+  <div class="ug-hero__actions"> 
+    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
+      <clr-icon shape="plus"></clr-icon>
+      <span class="ug-btn-text">ADD</span>
+    </button>
+   
+  </div>
+</section>
+
+
+<div class="ug-toolbar">
+  <div class="ug-toolbar__left">
+    <div class="ug-search">
+      <clr-icon shape="search"></clr-icon>
+      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
+    </div>
+  </div>
+  <div class="ug-toolbar__right">
+    <div class="ug-view-toggle">
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
+        <clr-icon shape="view-cards"></clr-icon>
+      </button>
+      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
+        <clr-icon shape="table"></clr-icon>
+      </button>
+    </div>
+  </div>
+</div> 
+<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
+  <clr-dg-placeholder>
+    <ng-template #loadingSpinner>
+      <clr-spinner>LOADING ... </clr-spinner>
+    </ng-template>
+    <div *ngIf="error;else loadingSpinner">{{error}}</div>
+  </clr-dg-placeholder>
+
+
+
+ <clr-dg-column [clrDgField]="'toggle_switch'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Toggle Switch
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'toggle_switch2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Toggle Switch2
+    </ng-container>
+  </clr-dg-column>
+
+
+ <clr-dg-column [clrDgField]="'url_field'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field
+						 </ng-container></clr-dg-column>
+
+
+ <clr-dg-column [clrDgField]="'url_field2'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field2
+						 </ng-container></clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'decimal_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Decimal Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'decimal_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Decimal Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'percentage_field'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Percentage Field
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'percentage_field2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      Percentage Field2
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'documentsequenc'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      documentsequenc
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'recaptcha'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      recaptcha
+    </ng-container>
+  </clr-dg-column>
+
+
+
+
+ <clr-dg-column [clrDgField]="'recaptcha2'">
+    <ng-container *clrDgHideableColumn="{hidden: false}">
+      recaptcha2
+    </ng-container>
+  </clr-dg-column>
+
+ 
+ <!-- who column -->
+      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container></clr-dg-column>
+      <!-- end --> 
+  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
+
+<clr-dg-cell>{{user.toggle_switch }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.toggle_switch2 }}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goTourl_fieldUrl(user.url_field)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field}}</clr-dg-cell>
+
+
+<clr-dg-cell (click)="goTourl_field2Url(user.url_field2)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field2}}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.decimal_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.decimal_field2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.percentage_field }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.percentage_field2 }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.documentsequenc }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.recaptcha }}</clr-dg-cell>
+
+
+<clr-dg-cell>{{user.recaptcha2 }}</clr-dg-cell>
+
+ 
+  <!-- who column -->
+<clr-dg-cell>
+  <clr-signpost>
+   <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
+   <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+     <h5 style="margin-top: 0">Who Column</h5>
+           <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+           <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+           <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+           <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+           <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+   </clr-signpost-content>
+ </clr-signpost>
+ </clr-dg-cell>
+ 
+ <!-- who colmn --> 
+ 
+ 
+    <clr-dg-action-overflow>
+      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button> -->
+      <button class="ug-action-item" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon>
+        EDIT
+      </button>
+      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon>
+ DELETE
+      </button>
+    </clr-dg-action-overflow>
+
+</clr-dg-row>
+
+  <clr-dg-footer class="ug-grid-footer">
+    <clr-dg-pagination #pagination [clrDgPageSize]="10">
+      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
+      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+      of {{pagination.totalItems}} Records
+    </clr-dg-pagination>
+  </clr-dg-footer>
+</clr-datagrid>
+
+<div class="ug-cards" *ngIf="viewMode==='cards'">
+  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
+ <div class="ug-card-item__body"> 
+    
+      <div class="ug-kv"><span>Toggle Switch</span><strong>{{user.toggle_switch}}</strong></div>
+
+
+      <div class="ug-kv"><span>Toggle Switch2</span><strong>{{user.toggle_switch2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Url Field</span><strong>{{user.url_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Url Field2</span><strong>{{user.url_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Decimal Field</span><strong>{{user.decimal_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Decimal Field2</span><strong>{{user.decimal_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>Percentage Field</span><strong>{{user.percentage_field}}</strong></div>
+
+
+      <div class="ug-kv"><span>Percentage Field2</span><strong>{{user.percentage_field2}}</strong></div>
+
+
+      <div class="ug-kv"><span>documentsequenc</span><strong>{{user.documentsequenc}}</strong></div>
+
+
+      <div class="ug-kv"><span>recaptcha</span><strong>{{user.recaptcha}}</strong></div>
+
+
+      <div class="ug-kv"><span>recaptcha2</span><strong>{{user.recaptcha2}}</strong></div>
+
+
+ </div>
+    <div class="ug-card-item__footer">
+      
+      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
+        <clr-icon shape="edit"></clr-icon> Edit
+      </button>
+      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
+        <clr-icon shape="trash"></clr-icon> Delete
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Basicp3</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">Toggle Switch</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="toggle_switch" formControlName="toggle_switch" clrToggle>
+                <label for="toggle_switch">Toggle Switch</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">Toggle Switch2</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="toggle_switch2" formControlName="toggle_switch2" clrToggle>
+                <label for="toggle_switch2">Toggle Switch2</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="url_field" class="ug-form-label">Url Field</label>
+              <input type="url" id="url_field" class="ug-form-input" formControlName="url_field" placeholder="Enter Url Field">
+              <div *ngIf="entryForm.controls['url_field'].errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls['url_field'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="url_field2" class="ug-form-label">Url Field2</label>
+              <input type="url" id="url_field2" class="ug-form-input" formControlName="url_field2" placeholder="Enter Url Field2">
+              <div *ngIf="entryForm.controls['url_field2'].errors" class="ug-form-error">
+                <div *ngIf="entryForm.controls['url_field2'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+  <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="decimal_field" class="ug-form-label">Decimal Field<span class="required-field">*</span></label>
+              <input type="number" id="decimal_field" class="ug-form-input" formControlName="decimal_field" placeholder="Enter decimal value" step="0.01">
+              <div *ngIf="submitted && entryForm.controls.decimal_field.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.decimal_field.errors.required">*This field is Required</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+  <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="decimal_field2" class="ug-form-label">Decimal Field2<span class="required-field">*</span></label>
+              <input type="number" id="decimal_field2" class="ug-form-input" formControlName="decimal_field2" placeholder="Enter decimal value" step="0.01">
+              <div *ngIf="submitted && entryForm.controls.decimal_field2.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.decimal_field2.errors.required">*This field is Required</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="percentage_field" class="ug-form-label">Percentage Field<span class="required-field">*</span></label>
+              <input type="number" id="percentage_field" class="ug-form-input" formControlName="percentage_field" placeholder="Enter Percentage Field">
+              <div *ngIf="submitted && entryForm.controls.percentage_field.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.percentage_field.errors.required">*This field is Required</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+<div class="form-row">
+            <div class="form-col"> 
+<div class="ug-form-group">
+              <label for="percentage_field2" class="ug-form-label">Percentage Field2<span class="required-field">*</span></label>
+              <input type="number" id="percentage_field2" class="ug-form-input" formControlName="percentage_field2" placeholder="Enter Percentage Field2">
+              <div *ngIf="submitted && entryForm.controls.percentage_field2.errors" class="ug-form-error">
+                <div *ngIf="submitted && entryForm.controls.percentage_field2.errors.required">*This field is Required</div>
+              </div>
+            </div>
+ </div>
+            </div>
+
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">recaptcha<span class="required-field">*</span></label>
+              <div class="recaptcha-container">
+                <div class="recaptcha-code">
+                  <b>{{  recaptchaCode }}</b>
+                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
+                    <clr-icon shape="refresh"></clr-icon>
+                  </button>
+                </div>
+                <input type="text" class="ug-form-input" formControlName="recaptcha" placeholder="Enter the code above">
+                <div *ngIf="submitted && entryForm.controls.recaptcha?.errors?.required" class="ug-form-error">*This field is Required</div>
+                <div *ngIf="submitted && entryForm.get('recaptcha')?.errors && entryForm.get('recaptcha')?.dirty" class="ug-form-error">
+                  <div *ngIf="submitted && entryForm.controls['recaptcha']?.hasError('recaptchaMismatch')" class="error_mess">recaptcha not valid.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
+              <div class="recaptcha-container">
+                <div class="recaptcha-code">
+                  <b>{{  recaptcha2Code }}</b>
+                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
+                    <clr-icon shape="refresh"></clr-icon>
+                  </button>
+                </div>
+                <input type="text" class="ug-form-input" formControlName="recaptcha2" placeholder="Enter the code above">
+                <div *ngIf="submitted && entryForm.controls.recaptcha2?.errors?.required" class="ug-form-error">*This field is Required</div>
+                <div *ngIf="submitted && entryForm.get('recaptcha2')?.errors && entryForm.get('recaptcha2')?.dirty" class="ug-form-error">
+                  <div *ngIf="submitted && entryForm.controls['recaptcha2']?.hasError('recaptcha2Mismatch')" class="error_mess">recaptcha2 not valid.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+      <div class="modal-footer">
+        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Basicp3</h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">Toggle Switch</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="toggle_switch" name="toggle_switch" clrToggle [(ngModel)]="rowSelected.toggle_switch">
+                <label for="toggle_switch">Toggle Switch</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">Toggle Switch2</label>
+              <div class="clr-toggle-wrapper">
+                <input type="checkbox" id="toggle_switch2" name="toggle_switch2" clrToggle [(ngModel)]="rowSelected.toggle_switch2">
+                <label for="toggle_switch2">Toggle Switch2</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="url_field" class="ug-form-label">Url Field</label>
+              <input type="url" id="url_field" class="ug-form-input" name="url_field" [(ngModel)]="rowSelected.url_field" placeholder="Enter URL">
+              <div *ngIf="!isValidurl_field(rowSelected.url_field)" class="ug-form-error">* Please enter a valid URL.</div>
+            </div>
+          </div>
+        </div>
+
+ <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="url_field2" class="ug-form-label">Url Field2</label>
+              <input type="url" id="url_field2" class="ug-form-input" name="url_field2" [(ngModel)]="rowSelected.url_field2" placeholder="Enter URL">
+              <div *ngIf="!isValidurl_field2(rowSelected.url_field2)" class="ug-form-error">* Please enter a valid URL.</div>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="decimal_field" class="ug-form-label">Decimal Field</label>
+              <input type="number" id="decimal_field" class="ug-form-input" name="decimal_field" [(ngModel)]="rowSelected.decimal_field" placeholder="Enter decimal value" step="0.01">
+            </div>
+          </div>
+        </div>
+
+
+        <div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label for="decimal_field2" class="ug-form-label">Decimal Field2</label>
+              <input type="number" id="decimal_field2" class="ug-form-input" name="decimal_field2" [(ngModel)]="rowSelected.decimal_field2" placeholder="Enter decimal value" step="0.01">
+            </div>
+          </div>
+        </div>
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="percentage_field" class="ug-form-label">Percentage Field</label>
+                <input type="number" id="percentage_field" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field"
+                  name="percentage_field" placeholder="Enter Percentage Field">
+              </div>
+            </div>
+          </div>
+
+
+ <!-- Number Fields -->
+          <div class="form-row">
+            <div class="form-col">
+              <div class="ug-form-group">
+                <label for="percentage_field2" class="ug-form-label">Percentage Field2</label>
+                <input type="number" id="percentage_field2" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field2"
+                  name="percentage_field2" placeholder="Enter Percentage Field2">
+              </div>
+            </div>
+          </div>
+
+
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">recaptcha<span class="required-field">*</span></label>
+              <div class="recaptcha-container">
+                <div class="recaptcha-code">
+                  <b>{{ recaptchaCode }}</b>
+                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
+                    <clr-icon shape="refresh"></clr-icon>
+                  </button>
+                </div>
+                <input type="text" class="ug-form-input" name="recaptcha" [(ngModel)]="rowSelected.recaptcha" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
+                <div *ngIf="recaptchaMismatch" class="ug-form-error">recaptcha not valid.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+<div class="form-row">
+          <div class="form-col">
+            <div class="ug-form-group">
+              <label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
+              <div class="recaptcha-container">
+                <div class="recaptcha-code">
+                  <b>{{ recaptcha2Code }}</b>
+                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
+                    <clr-icon shape="refresh"></clr-icon>
+                  </button>
+                </div>
+                <input type="text" class="ug-form-input" name="recaptcha2" [(ngModel)]="rowSelected.recaptcha2" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
+                <div *ngIf="recaptcha2Mismatch" class="ug-form-error">recaptcha2 not valid.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
+      <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
+    </div>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <div class="ug-delete-header">
+      <div class="ug-delete-icon">
+        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
+      </div>
+      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
+      <p class="ug-delete-subtitle">This action cannot be undone</p>
+    </div>
+
+<div class="ug-delete-details"><div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Toggle Switch:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.toggle_switch}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Toggle Switch2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.toggle_switch2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Url Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.url_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Url Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.url_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Decimal Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.decimal_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Decimal Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.decimal_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Percentage Field:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.percentage_field}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">Percentage Field2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.percentage_field2}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">documentsequenc:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.documentsequenc}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">recaptcha:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.recaptcha}}</span>
+      </div>
+
+<div class="ug-delete-detail-item">
+        <span class="ug-delete-detail-label">recaptcha2:</span>
+        <span class="ug-delete-detail-value">{{rowSelected.recaptcha2}}</span>
+      </div>
+
+ 
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+
+<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
+  <h3 class="modal-title">Import File</h3>
+  <div class="modal-body">
+    <div class="ug-form-group">
+      <label class="ug-form-label">Select CSV File</label>
+      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
+        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
+    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <!-- htmlpopup -->
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.scss b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.scss
new file mode 100644
index 0000000..a35f132
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.scss
@@ -0,0 +1,870 @@
+
+@import '../../../../../../styles.scss';
+
+// Import design tokens
+@import '../../../../../../styles/design-tokens';
+// Newbasicp1 Styles
+.ug-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: var(--theme-font-primary);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__icon {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    clr-icon {
+      width: 36px;
+      height: 36px;
+      color: white;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+    font-family: var(--theme-font-secondary);
+  }
+
+  &__subtitle {
+    font-size: 16px;
+    margin: 0;
+    opacity: 0.9;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.ug-btn-text {
+  margin-left: 8px;
+}
+
+// Modern Button Styles using ThemeService
+.ug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+
+  &:focus {
+    outline: 2px solid var(--theme-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Sizes
+  &.ug-btn-sm {
+    padding: 8px 16px;
+    font-size: 13px;
+    height: 32px;
+  }
+
+  &.ug-btn-md {
+    padding: 12px 20px;
+    font-size: 14px;
+    height: 40px;
+  }
+
+  &.ug-btn-lg {
+    padding: 16px 24px;
+    font-size: 16px;
+    height: 48px;
+  }
+
+  // Variants
+  &.ug-btn-primary {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-color: var(--theme-primary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &.ug-btn-secondary {
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-background);
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-outline {
+    background: transparent;
+    color: var(--theme-secondary);
+    border-color: var(--theme-secondary);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+      border-color: var(--theme-secondary);
+      color: var(--theme-secondary);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  &.ug-btn-error {
+    background: var(--theme-error, #ef4444);
+    color: white;
+    border-color: var(--theme-error, #ef4444);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background: var(--theme-error-dark, #dc2626);
+      border-color: var(--theme-error-dark, #dc2626);
+      transform: translateY(-2px);
+      box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
+    }
+  }
+
+  &.ug-btn-ghost {
+    background: transparent;
+    color: var(--theme-text-secondary);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--theme-background);
+      color: var(--theme-text);
+    }
+  }
+}
+
+.ug-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  &__left {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+// Form Container Styles
+.form-container {
+  padding: 20px 0;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12px 16px -12px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    margin: 0 0 16px 0;
+  }
+}
+
+.form-col {
+  flex: 1;
+  padding: 0 12px;
+  min-width: 250px;
+  
+  @media (max-width: 768px) {
+    padding: 0;
+    min-width: 100%;
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Password Input Container
+.password-input-container {
+  position: relative;
+  
+  .password-input {
+    padding-right: 40px;
+  }
+  
+  .password-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--theme-text-secondary);
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 200ms ease-out;
+    
+    &:hover {
+      color: var(--theme-text);
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    clr-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+// Textarea Styles
+textarea.ug-form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.ug-search {
+  position: relative;
+  max-width: 400px;
+
+  clr-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    z-index: 1;
+  }
+
+  &__input {
+    width: 100%;
+    padding: 12px 12px 12px 40px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 14px;
+    transition: all 200ms ease-out;
+    background: var(--theme-surface);
+    color: var(--theme-text);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    &:focus {
+      outline: none;
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+    }
+  }
+}
+
+.ug-view-toggle {
+  display: flex;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .ug-btn {
+    border-radius: 0;
+    border: none;
+    background: var(--theme-surface);
+    color: var(--theme-text-secondary);
+
+    &:first-child {
+      border-right: 1px solid #d1d5db;
+    }
+
+    &.ug-btn-primary {
+      background: var(--theme-primary);
+      color: white;
+    }
+  }
+}
+
+// Modern Table Styles
+.ug-grid {
+  background: var(--theme-surface);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+
+  ::ng-deep .datagrid {
+    .datagrid-head {
+      background: var(--theme-background);
+      
+      .datagrid-column {
+        padding: 16px 24px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--theme-text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-bottom: 1px solid #e5e7eb;
+      }
+    }
+
+    .datagrid-row {
+      transition: background-color 150ms ease-out;
+
+      &:hover {
+        background: var(--theme-background);
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .datagrid-cell {
+        padding: 16px 24px;
+        font-size: 14px;
+        color: var(--theme-text);
+      }
+    }
+
+    .datagrid-footer {
+      background: var(--theme-background);
+      border-top: 1px solid #e5e7eb;
+      padding: 16px 24px;
+    }
+  }
+}
+
+.ug-grid-footer {
+  background: var(--theme-background);
+  border-top: 1px solid #e5e7eb;
+}
+
+// Modern Card Styles - More beautiful design
+.ug-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.ug-card-item {
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: var(--theme-border-radius); // Using theme variable
+  box-shadow: var(--theme-shadow); // Using theme variable
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 16px;
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
+    min-height: 60px;
+  }
+
+  &__icon {
+    clr-icon {
+      width: 24px;
+      height: 24px;
+      color: var(--theme-primary);
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    flex: 1 1 auto;
+    font-size: 18px;
+    color: var(--theme-text);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    padding: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__footer {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+    background: var(--theme-background);
+  }
+}
+
+.ug-kv {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  
+  span {
+    color: var(--theme-text-secondary);
+  }
+
+  strong {
+    color: var(--theme-text);
+    font-weight: 500;
+    text-align: right;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Theme the card footer buttons
+.ug-card-item__footer .ug-btn {
+  border-radius: 10px;
+  flex: 1;
+  justify-content: center;
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-outline {
+  border: 1px solid var(--theme-secondary);
+  color: var(--theme-secondary);
+  background: transparent;
+  
+  &:hover {
+    background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
+    border-color: var(--theme-secondary);
+    color: var(--theme-secondary);
+  }
+}
+
+.ug-card-item__footer .ug-btn.ug-btn-error {
+  background: var(--theme-error, #ef4444);
+  color: #fff;
+  border-color: var(--theme-error, #ef4444);
+  
+  &:hover {
+    background: var(--theme-error-dark, #dc2626);
+    border-color: var(--theme-error-dark, #dc2626);
+    transform: translateY(-2px);
+  }
+}
+
+// Table view action buttons
+.ug-action-item {
+  @extend .ug-btn;
+  @extend .ug-btn-ghost;
+  @extend .ug-btn-sm;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  text-align: left;
+  
+  clr-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  
+  &.ug-btn-error {
+    color: var(--theme-error, #ef4444);
+    
+    &:hover {
+      background: rgba(239, 68, 68, 0.1);
+    }
+  }
+}
+
+// Ensure action overflow is visible
+::ng-deep .datagrid-action-overflow {
+  button.action-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    padding: 8px 12px;
+    
+    clr-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+// Status Badges
+.ug-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ug-status-enabled {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
+  color: #10b981;
+}
+
+.ug-status-disabled {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: #ef4444;
+}
+
+// Form Styles
+.ug-form-group {
+  margin-bottom: 20px;
+}
+
+.ug-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+
+.ug-form-input, .ug-form-select {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+  margin-bottom: 0;
+  font-family: var(--theme-font-primary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
+  }
+
+  &:disabled {
+    background: var(--theme-background);
+    color: var(--theme-text-secondary);
+    cursor: not-allowed;
+  }
+
+  &.error {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  }
+
+  &::placeholder {
+    color: var(--theme-text-secondary);
+  }
+}
+
+.ug-form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: 40px;
+  appearance: none;
+}
+
+.ug-form-error {
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.required-field {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.ug-file-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background: var(--theme-surface);
+  color: var(--theme-text);
+  
+  &::file-selector-button {
+    @extend .ug-btn;
+    @extend .ug-btn-secondary;
+    margin-right: 12px;
+    padding: 8px 16px;
+    border: none;
+  }
+}
+
+// Delete Modal Styles
+.ug-delete-header {
+  text-align: center;
+  padding: 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.ug-delete-icon {
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.ug-delete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--theme-text);
+  margin: 0 0 8px 0;
+}
+
+.ug-delete-subtitle {
+  font-size: 16px;
+  color: var(--theme-text-secondary);
+  margin: 0;
+}
+
+.ug-delete-details {
+  padding: 24px;
+}
+
+.ug-delete-detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ug-delete-detail-label {
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}
+
+.ug-delete-detail-value {
+  font-weight: 600;
+  color: var(--theme-text);
+}
+
+.delete {
+  color: #ef4444;
+  text-align: center;
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.heading {
+  text-align: center;
+  margin-bottom: 24px;
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+// Modal Header
+::ng-deep .modal-header {
+  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+  color: white;
+  border-radius: 16px 16px 0 0 !important;
+  padding: 20px 24px !important;
+  
+  .modal-title {
+    color: white;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0;
+    font-family: var(--theme-font-secondary);
+  }
+  
+  .close {
+    color: white;
+    opacity: 0.8;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Modal Body
+::ng-deep .modal-body {
+  padding: 24px !important;
+}
+
+// Modal Footer
+::ng-deep .modal-footer {
+  padding: 20px 24px !important;
+  background: var(--theme-background);
+  border-radius: 0 0 16px 16px !important;
+  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// Recaptcha Container Styles
+.recaptcha-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recaptcha-code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--theme-background);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  
+  b {
+    font-size: 18px;
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// Toggle Styles
+.clr-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  label {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: var(--theme-text);
+  }
+}
+
+// URL Field Styles
+.ug-form-input[type="url"] {
+  font-family: monospace;
+}
+// Responsive adjustments
+@media (max-width: 768px) {
+  .ug-hero {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+    
+    &__content {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    &__actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .ug-toolbar {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .ug-search {
+    max-width: 100%;
+  }
+  
+  .ug-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .ug-card-item {
+    &__header {
+      flex-direction: column;
+      text-align: center;
+      
+      &__icon {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+    
+    &__footer {
+      justify-content: center;
+    }
+  }
+.recaptcha-code {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .ug-btn {
+      align-self: flex-end;
+    }
+  }}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.ts
new file mode 100644
index 0000000..724c67e
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.component.ts
@@ -0,0 +1,612 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Basicp3service} from './Basicp3.service';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
+import { ExtensionService } from 'src/app/services/fnd/extension.service';
+import { DashboardContentModel2 } from 'src/app/models/builder/dashboard'; 
+import { Basicp3cardvariable } from './Basicp3_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { CsvService } from 'src/app/services/csv.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from 'src/app/services/theme.service';
+import { Subscription } from 'rxjs';
+import { ExcelService } from 'src/app/services/excel.service';
+import * as moment from 'moment';
+declare var JsBarcode: any; 
+@Component({
+  selector: 'app-Basicp3',
+  templateUrl: './Basicp3.component.html',
+  styleUrls: ['./Basicp3.component.scss']
+})
+export class Basicp3Component implements OnInit {
+  cardButton = Basicp3cardvariable.cardButton;
+  cardmodeldata = Basicp3cardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Basicp3cardvariable.cardButton;
+  cardmodal;  changeView(){
+  this.isCardview = !this.isCardview;
+  }
+    beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+ userrole;
+  rowSelected :any= {};
+  modaldelete=false;
+  modalEdit=false;
+  modalAdd= false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine:any;
+ additionalFieldsFromBackend: any[] = [];
+  formcode = 'Basicp3_formCode'
+tableName = 'Basicp3';  checkFormCode; selected: any[] = [];
+filterText: string = '';
+  viewMode: 'table' | 'cards' = 'cards';
+  private themeSubscription: Subscription; constructor(
+    private extensionService: ExtensionService,
+private userInfoService:UserInfoService,
+    private mainService:Basicp3service,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+private csvService: CsvService,
+    private translate: TranslateService,
+    private themeService: ThemeService, 
+private excel: ExcelService,    private _fb: FormBuilder,
+  ) { }
+
+  switchLanguage(language: string) {
+    this.translate.use(language);
+  } 
+  private editInterval: any;
+// component button 
+  ngOnInit(): void {
+ this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
+      // Theme changes will automatically update CSS variables
+      // This triggers a re-render of themed elements
+    });
+    if(this.cardmodeldata !== ''){
+     this.cardmodal = JSON.parse(this.cardmodeldata);
+    this.dashboardArray = this.cardmodal.dashboard.slice();
+    console.log(this.dashboardArray)
+    }
+    this.userrole=this.userInfoService.getRoles();
+    this.getData();
+    this.entryForm = this._fb.group({
+toggle_switch : [true],
+
+toggle_switch2 : [true],
+
+url_field : [null],
+
+url_field2 : [null],
+
+decimal_field : [null,[Validators.required]],
+
+decimal_field2 : [null,[Validators.required]],
+
+percentage_field : [null,[Validators.required]],
+
+percentage_field2 : [null,[Validators.required]],
+
+documentsequenc : [null],
+
+recaptcha : ['', [Validators.required,this.checkrecaptcha.bind(this)]],
+
+recaptcha2 : ['', [Validators.required,this.checkrecaptcha2.bind(this)]],
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }); // component_button200
+ // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Basicp3_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+this.generaterecaptcha()
+
+this.generaterecaptcha2()
+
+
+  }
+ ngOnDestroy(): void {
+ if (this.themeSubscription) {
+      this.themeSubscription.unsubscribe();
+    }
+    if (this.editInterval) {
+      clearInterval(this.editInterval);
+    }
+  }
+  get filteredGroups(): any[] {
+    const items: any[] = (this.product as unknown as any[]) || [];
+    const text = (this.filterText || '').toLowerCase();
+    if (!text) { return items; }
+    return items.filter(g => (
+((g?.toggle_switch || '').toString()).toLowerCase().includes(text) ||
+
+((g?.toggle_switch2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.url_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.url_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.decimal_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.decimal_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.percentage_field || '').toString()).toLowerCase().includes(text) ||
+
+((g?.percentage_field2 || '').toString()).toLowerCase().includes(text) ||
+
+((g?.documentsequenc || '').toString()).toLowerCase().includes(text) ||
+
+((g?.recaptcha || '').toString()).toLowerCase().includes(text) ||
+
+((g?.recaptcha2 || '').toString()).toLowerCase().includes(text) 
+
+    ));
+  }
+
+  setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
+  onExport() {
+    this.excel.exportAsExcelFile(this.product, 'user_',
+      moment().format('YYYYMMDD_HHmmss'))
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ error; 
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+this.product = [...this.product].reverse(); if(this.product.length==0){
+        this.error="No Data Available"
+     }   
+    },(error) => {
+      console.log(error);
+      if(error){
+       this.error="Server Error";
+     }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    this.modalEdit = true;
+  }
+   onDelete(row) {
+    this.rowSelected = row;
+     this.modaldelete=true;
+  }
+  delete(id)
+  {
+    this.modaldelete = false;
+    console.log("in delete  "+id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+  if (data) {				      this.toastr.success('Deleted successfully');      }
+    });
+  }
+    onUpdate(id) {
+    this.modalEdit = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  } 
+onCreate() {
+     this.modalAdd=false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  this.mainService.create(this.entryForm.value).subscribe(
+    (data) => {
+      console.log(data);
+  if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Added Successfully");
+        }
+setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd() {
+this.modalAdd = true; this.submitted = false;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  }
+ submitted = false;
+onSubmit() {
+  console.log(this.entryForm.value);
+ this.submitted = true;
+  if (this.entryForm.invalid) {
+    return;
+  }this.onCreate();
+
+} 
+
+
+
+
+isValidurl_field(url: string): boolean {
+						    return  /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url);   } 
+						goTourl_fieldUrl(val){     window.open(val)   }
+
+isValidurl_field2(url: string): boolean {
+						    return  /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url);   } 
+						goTourl_field2Url(val){     window.open(val)   }
+
+
+
+
+
+
+
+
+
+
+
+recaptchaCode = '';  
+generaterecaptcha (): void {
+  const possibleCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const codeLength = 6; // Change to desired length
+
+  let recaptcha= '';
+  for (let i = 0; i < codeLength; i++) {
+    const randomIndex = Math.floor(Math.random() * possibleCharacters.length);
+    recaptcha += possibleCharacters.charAt(randomIndex);
+  }
+  this.recaptchaCode = recaptcha;
+}
+
+checkrecaptcha(control: AbstractControl): ValidationErrors | null {
+  if (control.value !== this.recaptchaCode) {
+    return { recaptchaMismatch: true };
+  }
+  return null;
+}  
+
+recaptchaMismatch = false;  
+
+checkrecaptchaEdit(): void {
+	  if (this.rowSelected.recaptcha  !== this. recaptchaCode) {
+	  this. recaptchaMismatch = true;    } else {      this.recaptchaMismatch = false;    }  } 
+
+recaptcha2Code = '';  
+generaterecaptcha2 (): void {
+  const possibleCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const codeLength = 6; // Change to desired length
+
+  let recaptcha2= '';
+  for (let i = 0; i < codeLength; i++) {
+    const randomIndex = Math.floor(Math.random() * possibleCharacters.length);
+    recaptcha2 += possibleCharacters.charAt(randomIndex);
+  }
+  this.recaptcha2Code = recaptcha2;
+}
+
+checkrecaptcha2(control: AbstractControl): ValidationErrors | null {
+  if (control.value !== this.recaptcha2Code) {
+    return { recaptcha2Mismatch: true };
+  }
+  return null;
+}  
+
+recaptcha2Mismatch = false;  
+
+checkrecaptcha2Edit(): void {
+	  if (this.rowSelected.recaptcha2  !== this. recaptcha2Code) {
+	  this. recaptcha2Mismatch = true;    } else {      this.recaptcha2Mismatch = false;    }  } 
+
+
+  // csv
+
+  modalCsv = false;
+  selectedFiles: File;
+  fileList;
+  ttype = 'usergroupmaintenance';
+
+
+  // Import CSV
+  public selectFile(event) {
+    this.selectedFiles = event.target.files[0];
+    // this.saveCsv();
+  }
+
+  csvImport() {
+    console.log("import CSV");
+    this.modalCsv = true;
+  }
+  saveCsv() {
+    this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
+      console.log(data);
+      this.fileList = data;
+      this.modalCsv = false;
+    },
+      (error) => {
+        console.log(error);
+        if (error.status == 202) {
+          this.toastr.success(error.error.text)
+        }
+      });
+  }
+
+  downloadFiles() {
+    this.csvService.downloadCsvs(this.ttype);
+
+  }
+// updateaction
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.service.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.service.ts
new file mode 100644
index 0000000..d02c10d
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3.service.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Basicp3service{
+  private baseURL = "Basicp3/Basicp3" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// updateaction
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3_cardvariable.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3_cardvariable.ts
new file mode 100644
index 0000000..ff91595
--- /dev/null
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/angulardatatype/Basicp3/Basicp3_cardvariable.ts
@@ -0,0 +1,4 @@
+export const Basicp3cardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}
\ No newline at end of file
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
index fcf1339..e968a62 100644
--- a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
@@ -1,3 +1,6 @@
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
 
 
 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -302,6 +305,15 @@ const routes: Routes = [
 
 
       // buildercomponents
+{path:'Basicp3',component:Basicp3Component},
+
+
+{path:'Basicp2',component:Basicp2Component},
+
+
+{path:'Basicp1',component:Basicp1Component},
+
+
 
 
 
diff --git a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
index 7b91f6a..d54f4ea 100644
--- a/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/testpaython001-demot1-f/authsec_angular_clarity_modern/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -1,3 +1,6 @@
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
 
 
 import { CommonModule } from '@angular/common';
@@ -224,6 +227,15 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
 
 
     // buildercomponents
+Basicp3Component,
+
+
+Basicp2Component,
+
+
+Basicp1Component,
+
+
 
 
     ThemeCustomizationComponent,
diff --git a/testpaython001-testtensep-d/authsec_mysql/mysql/wf_table/wf_table.sql b/testpaython001-testtensep-d/authsec_mysql/mysql/wf_table/wf_table.sql
new file mode 100755
index 0000000..3554ffb
--- /dev/null
+++ b/testpaython001-testtensep-d/authsec_mysql/mysql/wf_table/wf_table.sql
@@ -0,0 +1,6 @@
+CREATE TABLE testtensep.Basicp1(id BIGINT NOT NULL AUTO_INCREMENT, textarea_field VARCHAR(400), paragraph_field VARCHAR(400), textarea VARCHAR(400), paragraph_field2 VARCHAR(400), phone_number2 VARCHAR(400), name VARCHAR(400), number1 int, phone_number VARCHAR(400), number2 int, name2 VARCHAR(400), password_field VARCHAR(400), textarea_field2 VARCHAR(400),  PRIMARY KEY (id));
+
+CREATE TABLE testtensep.Basicp2(id BIGINT NOT NULL AUTO_INCREMENT, datetime_field2 VARCHAR(400), about VARCHAR(400), datetime_field VARCHAR(400), userid_field VARCHAR(400), email_field2 VARCHAR(400), date_field Date, email_field VARCHAR(400), textarea2 VARCHAR(400), date_field2 Date,  PRIMARY KEY (id));
+
+CREATE TABLE testtensep.Basicp3(id BIGINT NOT NULL AUTO_INCREMENT, toggle_switch2 VARCHAR(400), decimal_field2 double, documentsequenc VARCHAR(400), toggle_switch VARCHAR(400), recaptcha VARCHAR(400), percentage_field int, percentage_field2 int, url_field VARCHAR(400), url_field2 VARCHAR(400), decimal_field double, recaptcha2 VARCHAR(400),  PRIMARY KEY (id));
+