cat-documents-ng 0.0.5 → 0.0.7

package/{src → projects/cat-document-lib/src}/lib/document/components/document-viewer/document-viewer.component.html

@@ -1,244 +1,244 @@
-<div class="grid">
-  <div class="col-12">
-    <div class="p-fluid p-formgrid grid m-0">
-      <div class="col-12 md:col-12 md:flex justify-content-between">
-        <div class="action col-12 p-0 md:col-2 no-grow-no-shrink">
-          <p-listbox
-            [options]="countries"
-            [filter]="true"
-            [(ngModel)]="selectedCountry"
-            optionLabel="name"
-            [style]="{ width: '15rem' }"
-            [listStyle]="{ 'max-height': '250px' }"
-          >
-            <ng-template let-country pTemplate="item">
-              <div class="flex align-items-center gap-2">
-                <p-checkbox
-                  [(ngModel)]="country.checked"
-                  [binary]="true"
-                  [inputId]="country.code"
-                ></p-checkbox>
-                <div>{{ country.name }}</div>
-              </div>
-            </ng-template>
-          </p-listbox>
-        </div>
-        @if(selectedDocument){
-
-        <div id="outerContainer col-12 md:col-7">
-          <div
-            *ngIf="isImage(selectedDocument.contentType)"
-            class="img-container"
-          >
-            <img
-              [src]="selectedDocument.documentUrl"
-              width="500"
-              height="500"
-              alt="Document Image"
-            />
-          </div>
-          @if(selectedDocument.contentType == "application/pdf"){
-          <div class="pdf-container">
-            <pdf-viewer
-              [src]="selectedDocument.documentUrl"
-              [rotation]="0"
-              [original-size]="false"
-              [show-all]="true"
-              [fit-to-page]="false"
-              [zoom]="1"
-              [zoom-scale]="'page-width'"
-              [stick-to-page]="false"
-              [render-text]="true"
-              [external-link-target]="'blank'"
-              [autoresize]="true"
-              [show-borders]="false"
-              style="width: 55vw; height: 100vh"
-            ></pdf-viewer>
-          </div>
-          }
-        </div>
-        }
-
-        <div class="left-part col-12 md:col-3 pt-0">
-          <div class="alerts mb-4 pb-1">
-            <button
-              type="button"
-              *ngIf="
-                (alertData?.status !== 'Pending' && !!alertData?.status) ||
-                alertData?.isAlert === false
-              "
-              class="bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3"
-            >
-              <i
-                class="pi pi-verified mr-2 cursor-pointer"
-                [ngStyle]="{
-                  color:
-                    alertData?.status === 'Pending' &&
-                    alertData?.isAlert !== false
-                      ? '#FFFFFF'
-                      : '#8A8EA6'
-                }"
-                style="font-size: 20px"
-              ></i>
-              <span class="font-semibold text-white">Verified</span>
-            </button>
-            <div
-              class="card mb-0"
-              [ngClass]="
-                (alertData?.status === 'Pending' || !alertData?.status) &&
-                alertData?.isAlert !== false
-                  ? 'alert-card'
-                  : 'success-alert'
-              "
-            >
-              <div class="flex align-items-center mb-2 pb-1" >
-                <h4 class="mr-3 mt-0 mb-0 text-color font-bold" style="font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;" >Alerts</h4>
-                <i
-                  class="pi pi-exclamation-triangle"
-                  style="font-size: 20px"
-                  [ngStyle]="{
-                    color:
-                      (alertData?.status === 'Pending' || !alertData?.status) &&
-                      alertData?.isAlert !== false
-                        ? '#FB392D'
-                        : '#8A8EA6'
-                  }"
-                ></i>
-              </div>
-              <p class="text-color mb-0">{{ alertData?.alertMessage }}</p>
-            </div>
-          </div>
-          <div class="summery mb-4 pb-1">
-            <div class="card p-0 mb-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
-              <div class="p-0" >
-                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Summary</h4>
-              </div>
-            </div>
-            <div class="card mb-0" style="border-top-right-radius: 0px;border-top-left-radius: 0px;" >
-              <p-timeline [value]="events">
-                <ng-template pTemplate="content" let-event>
-                  {{ event.status }}
-                </ng-template>
-              </p-timeline>
-            </div>
-          </div>
-          <div *ngIf="propertyDetails" class="property-details mb-4 pb-1">
-            <div class="card mb-0">
-              <h4 class="bold" style="font-size: 21px; font-weight: bold;">Property Details</h4>
-              <hr />
-              <div class="grid">
-                <div class="col-12 md:col-12">
-                  <div class="feild flex">
-                    <div class="col-12 flex md:col-7">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold" style="font-size: 21px; font-weight: bold;">Detached House</div>
-                        <div class="decription">
-                          {{ propertyDetails?.PropertyType }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-12 flex md:col-5">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Floors }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Floors</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="feild flex">
-                    <div class="col-12 flex md:col-7">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/badroom.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Bedrooms }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Bedrooms</div>
-                      </div>
-                    </div>
-                    <div class="col-12 flex md:col-5">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Kitchen }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Kitchen</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12 flex ml-2 md:col-12">
-                  <div class="img mr-2">
-                    <img src="../../../../assets/icons/location.png" alt="" />
-                  </div>
-                  <div class="title">
-                    <div class="title font-bold">
-                      {{ propertyDetails?.Address }}
-                    </div>
-                    <div class="decription" style="font-size: 21px; font-weight: bold;">Address</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="notes card pl-0 pr-0 pt-0">
-            <div class="card p-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
-              <div class="p-0" >
-                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Notes</h4>
-              </div>
-            </div>
-            <div class="card mb-0 pt-0">
-              <div class="textAreaControl mt-3">
-                <textarea
-                  rows="5"
-                  cols="30"
-                  pInputTextarea
-                  #textArea
-                  [(ngModel)]="notes"
-                >
-                </textarea>
-              </div>
-              <div class="buttons document-btn-wrapper flex mt-2">
-                <button
-                  pButton
-                  pRipple
-                  type="button"
-                  label="Resubmission"
-                  class="p-button-outlined mr-2"
-                ></button>
-                <button
-                  pButton
-                  pRipple
-                  type="button"
-                  label="Accept"
-                ></button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="grid">
+  <div class="col-12">
+    <div class="p-fluid p-formgrid grid m-0">
+      <div class="col-12 md:col-12 md:flex justify-content-between">
+        <div class="action col-12 p-0 md:col-2 no-grow-no-shrink">
+          <p-listbox
+            [options]="countries"
+            [filter]="true"
+            [(ngModel)]="selectedCountry"
+            optionLabel="name"
+            [style]="{ width: '15rem' }"
+            [listStyle]="{ 'max-height': '250px' }"
+          >
+            <ng-template let-country pTemplate="item">
+              <div class="flex align-items-center gap-2">
+                <p-checkbox
+                  [(ngModel)]="country.checked"
+                  [binary]="true"
+                  [inputId]="country.code"
+                ></p-checkbox>
+                <div>{{ country.name }}</div>
+              </div>
+            </ng-template>
+          </p-listbox>
+        </div>
+        @if(selectedDocument){
+
+        <div id="outerContainer col-12 md:col-7">
+          <div
+            *ngIf="isImage(selectedDocument.contentType)"
+            class="img-container"
+          >
+            <img
+              [src]="selectedDocument.documentUrl"
+              width="500"
+              height="500"
+              alt="Document Image"
+            />
+          </div>
+          @if(selectedDocument.contentType == "application/pdf"){
+          <div class="pdf-container">
+            <pdf-viewer
+              [src]="selectedDocument.documentUrl"
+              [rotation]="0"
+              [original-size]="false"
+              [show-all]="true"
+              [fit-to-page]="false"
+              [zoom]="1"
+              [zoom-scale]="'page-width'"
+              [stick-to-page]="false"
+              [render-text]="true"
+              [external-link-target]="'blank'"
+              [autoresize]="true"
+              [show-borders]="false"
+              style="width: 55vw; height: 100vh"
+            ></pdf-viewer>
+          </div>
+          }
+        </div>
+        }
+
+        <div class="left-part col-12 md:col-3 pt-0">
+          <div class="alerts mb-4 pb-1">
+            <button
+              type="button"
+              *ngIf="
+                (alertData?.status !== 'Pending' && !!alertData?.status) ||
+                alertData?.isAlert === false
+              "
+              class="bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3"
+            >
+              <i
+                class="pi pi-verified mr-2 cursor-pointer"
+                [ngStyle]="{
+                  color:
+                    alertData?.status === 'Pending' &&
+                    alertData?.isAlert !== false
+                      ? '#FFFFFF'
+                      : '#8A8EA6'
+                }"
+                style="font-size: 20px"
+              ></i>
+              <span class="font-semibold text-white">Verified</span>
+            </button>
+            <div
+              class="card mb-0"
+              [ngClass]="
+                (alertData?.status === 'Pending' || !alertData?.status) &&
+                alertData?.isAlert !== false
+                  ? 'alert-card'
+                  : 'success-alert'
+              "
+            >
+              <div class="flex align-items-center mb-2 pb-1" >
+                <h4 class="mr-3 mt-0 mb-0 text-color font-bold" style="font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;" >Alerts</h4>
+                <i
+                  class="pi pi-exclamation-triangle"
+                  style="font-size: 20px"
+                  [ngStyle]="{
+                    color:
+                      (alertData?.status === 'Pending' || !alertData?.status) &&
+                      alertData?.isAlert !== false
+                        ? '#FB392D'
+                        : '#8A8EA6'
+                  }"
+                ></i>
+              </div>
+              <p class="text-color mb-0">{{ alertData?.alertMessage }}</p>
+            </div>
+          </div>
+          <div class="summery mb-4 pb-1">
+            <div class="card p-0 mb-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
+              <div class="p-0" >
+                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Summary</h4>
+              </div>
+            </div>
+            <div class="card mb-0" style="border-top-right-radius: 0px;border-top-left-radius: 0px;" >
+              <p-timeline [value]="events">
+                <ng-template pTemplate="content" let-event>
+                  {{ event.status }}
+                </ng-template>
+              </p-timeline>
+            </div>
+          </div>
+          <div *ngIf="propertyDetails" class="property-details mb-4 pb-1">
+            <div class="card mb-0">
+              <h4 class="bold" style="font-size: 21px; font-weight: bold;">Property Details</h4>
+              <hr />
+              <div class="grid">
+                <div class="col-12 md:col-12">
+                  <div class="feild flex">
+                    <div class="col-12 flex md:col-7">
+                      <div class="img mr-2">
+                        <img
+                          src="../../../../assets/icons/building-icon.png"
+                          alt=""
+                        />
+                      </div>
+                      <div class="title">
+                        <div class="title font-bold" style="font-size: 21px; font-weight: bold;">Detached House</div>
+                        <div class="decription">
+                          {{ propertyDetails?.PropertyType }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-12 flex md:col-5">
+                      <div class="img mr-2">
+                        <img
+                          src="../../../../assets/icons/building-icon.png"
+                          alt=""
+                        />
+                      </div>
+                      <div class="title">
+                        <div class="title font-bold">
+                          {{ propertyDetails?.Floors }}
+                        </div>
+                        <div class="decription" style="font-size: 21px; font-weight: bold;">Floors</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="feild flex">
+                    <div class="col-12 flex md:col-7">
+                      <div class="img mr-2">
+                        <img
+                          src="../../../../assets/icons/badroom.png"
+                          alt=""
+                        />
+                      </div>
+                      <div class="title">
+                        <div class="title font-bold">
+                          {{ propertyDetails?.Bedrooms }}
+                        </div>
+                        <div class="decription" style="font-size: 21px; font-weight: bold;">Bedrooms</div>
+                      </div>
+                    </div>
+                    <div class="col-12 flex md:col-5">
+                      <div class="img mr-2">
+                        <img
+                          src="../../../../assets/icons/building-icon.png"
+                          alt=""
+                        />
+                      </div>
+                      <div class="title">
+                        <div class="title font-bold">
+                          {{ propertyDetails?.Kitchen }}
+                        </div>
+                        <div class="decription" style="font-size: 21px; font-weight: bold;">Kitchen</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 flex ml-2 md:col-12">
+                  <div class="img mr-2">
+                    <img src="../../../../assets/icons/location.png" alt="" />
+                  </div>
+                  <div class="title">
+                    <div class="title font-bold">
+                      {{ propertyDetails?.Address }}
+                    </div>
+                    <div class="decription" style="font-size: 21px; font-weight: bold;">Address</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="notes card pl-0 pr-0 pt-0">
+            <div class="card p-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
+              <div class="p-0" >
+                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Notes</h4>
+              </div>
+            </div>
+            <div class="card mb-0 pt-0">
+              <div class="textAreaControl mt-3">
+                <textarea
+                  rows="5"
+                  cols="30"
+                  pInputTextarea
+                  #textArea
+                  [(ngModel)]="notes"
+                >
+                </textarea>
+              </div>
+              <div class="buttons document-btn-wrapper flex mt-2">
+                <button
+                  pButton
+                  pRipple
+                  type="button"
+                  label="Resubmission"
+                  class="p-button-outlined mr-2"
+                ></button>
+                <button
+                  pButton
+                  pRipple
+                  type="button"
+                  label="Accept"
+                ></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/{src → projects/cat-document-lib/src}/lib/document/components/document-viewer/document-viewer.component.scss

@@ -1,36 +1,36 @@
-.alert-card {
-  background-color: #fb392d1a;
-}
-
-.success-alert {
-  border-radius: 10px;
-  border: 1px solid rgba(251, 57, 45, 0.1);
-  background: linear-gradient(0deg, #dedede 0%, #dedede 100%), #fff;
-}
-
-.p-timeline-event-opposite {
-  display: none;
-}
-.decription {
-  color: #676b89;
-}
-.textAreaControl textarea {
-  width: 100%;
-  resize: vertical;
-  max-width: 100%;
-}
-
-.document-btn-wrapper {
-  .p-button-outlined {
-    color: #f57c00;
-  }
-}
-
-.document-viewer{
-  .p-dialog-header{
-    background-color:#ececf9;
-  }
-  .p-dialog-content{
-    background-color:#ececf9;
-  }
+.alert-card {
+  background-color: #fb392d1a;
+}
+
+.success-alert {
+  border-radius: 10px;
+  border: 1px solid rgba(251, 57, 45, 0.1);
+  background: linear-gradient(0deg, #dedede 0%, #dedede 100%), #fff;
+}
+
+.p-timeline-event-opposite {
+  display: none;
+}
+.decription {
+  color: #676b89;
+}
+.textAreaControl textarea {
+  width: 100%;
+  resize: vertical;
+  max-width: 100%;
+}
+
+.document-btn-wrapper {
+  .p-button-outlined {
+    color: #f57c00;
+  }
+}
+
+.document-viewer{
+  .p-dialog-header{
+    background-color:#ececf9;
+  }
+  .p-dialog-content{
+    background-color:#ececf9;
+  }
 }

package/{src → projects/cat-document-lib/src}/lib/document/components/document-viewer/document-viewer.component.spec.ts

@@ -1,21 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DocumentViewerComponent } from './document-viewer.component';
-
-describe('DocumentViewerComponent', () => {
-  let component: DocumentViewerComponent;
-  let fixture: ComponentFixture<DocumentViewerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DocumentViewerComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DocumentViewerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentViewerComponent } from './document-viewer.component';
+
+describe('DocumentViewerComponent', () => {
+  let component: DocumentViewerComponent;
+  let fixture: ComponentFixture<DocumentViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DocumentViewerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});