carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/drop-zone/drop-zone.component.html

@@ -0,0 +1,376 @@
+@let docCount = docs().length; @let cropFile = crop() === true;
+@let showCrop = showCropper() === true;
+@let documentVariant = variant() === dropZoneVariant.DOCUMENT;
+@let videoVariant = variant() === dropZoneVariant.VIDEO;
+@let profileVariant = variant() === dropZoneVariant.PROFILE;
+@let coverVariant = variant() === dropZoneVariant.COVER;
+@let logoVariant = variant() === dropZoneVariant.LOGO;
+@let roundedBorder = rounded() === true; @let coverPreview = coverUrl !== "";
+@let profilePreview = profileUrl !== ""; @let logoPreview = !!logoUrl;
+@let smallSize = size() === "480px";
+@let countFiles = this.maxCountFiles();
+@let largeSize = size() === "640px";
+
+@if (isDocumentsMode() && documentsDropZoneOpen() && dragMode()) {
+  <div class="documents-drag-overlay"></div>
+}
+
+<div
+  class="container"
+  [class]="{
+    smallContainer: smallSize,
+    largeContainer: largeSize,
+    dragMode: dragMode() && !isDocumentsMode(),
+    dragModeDocuments: dragMode() && isDocumentsMode(),
+    onDragover: onDragover(),
+    logoVar: logoVariant,
+    hasCropper: isCropperReady(),
+    'is-details-slider': isDetailsSlider(),
+    'is-drawer-mode': isDrawerMode(),
+    isCoverDetails: isCoverDetails(),
+    'is-documents-mode': isDocumentsMode(),
+  }"
+>
+  @if (coverVariant && coverPreview) {
+    <div class="cover-container">
+      <img [src]="coverUrl" class="cover-image" draggable="false" />
+    </div>
+  }
+  @if (profileVariant) {
+    @if (!profilePreview) {
+      <div class="avatar">
+        <cai-avatar
+          [driver]="driver()"
+          [size]="160"
+          [rounded]="rounded()"
+        ></cai-avatar>
+      </div>
+    } @else {
+      <div class="profile-container">
+        <img
+          [class]="rounded() ? 'profile-rounded-image' : 'profile-square-image'"
+          [src]="profileUrl"
+          draggable="false"
+        />
+      </div>
+    }
+  }
+  @if (logoVariant && logoPreview) {
+    <div class="logo-container" [class.has-logo]="!!logoUrl">
+      <img class="logo-image" [src]="logoUrl" draggable="false" />
+    </div>
+  }
+  <!--Image Cropper-->
+  @if (cropFile && showCrop) {
+    @if (!isCropperReady()) {
+      <div class="cropper-loader">
+        <div class="spinner"></div>
+      </div>
+    }
+    <div class="cropper-overlay">
+      <image-cropper
+        #cropper
+        class="img-cropper"
+        [output]="'base64'"
+        [class.logoBorder]="logoVariant"
+        [roundCropper]="roundedBorder ? true : false"
+        [hideResizeSquares]="true"
+        [allowMoveImage]="true"
+        [transform]="transform"
+        (transformChange)="onTransformChange($event)"
+        format="png"
+        [aspectRatio]="ratioHelper()"
+        [resizeToWidth]="cropWidth()"
+        [resizeToHeight]="cropHeight()"
+        [containWithinAspectRatio]="true"
+        [imageChangedEvent]="imageChangedEvent"
+        (imageCropped)="imageCropped($event)"
+        (imageLoaded)="imageLoaded($event)"
+        (cropperReady)="cropperReady()"
+        (loadImageFailed)="loadImageFailed()"
+      ></image-cropper>
+      @if (isCropperReady()) {
+        <div class="lower-part">
+          <div class="range">
+            <input
+              #inputRange
+              type="range"
+              class="custom-range"
+              min="1"
+              max="10"
+              step="0.1"
+              [value]="zoomValue()"
+              (input)="onZoomChange($event)"
+            />
+          </div>
+          <div class="cropper-buttons">
+            <button class="cancel-button" (click)="cancelCrop()">Cancel</button>
+            <button class="submit-button" (click)="submitCrop()">Crop</button>
+          </div>
+        </div>
+      }
+    </div>
+  }
+  <!-- Drop Zone -->
+  @if (!isDocumentsMode() || documentsDropZoneOpen()) {
+    <div
+      #dropZoneContainer
+      class="drop-zone-container"
+      [class.has-logo]="logoVariant && !!logoUrl"
+      (drop)="onDrop($event)"
+      (dragover)="onDragOver($event)"
+      (dragenter)="onDragEnter($event)"
+      (dragleave)="onDragLeave($event)"
+      [class]="{
+        'more-docs': docCount >= 3 && largeSize,
+        'small-more-docs': docCount >= 2 && smallSize,
+        'max-reached-drop-design':
+          (countFiles <= this.docs().length || maxCountReached()) &&
+          documentVariant,
+        'max-reached-more-doc':
+          (countFiles <= this.docs().length || maxCountReached()) &&
+          documentVariant,
+        'max-reached-more-video':
+          (countFiles <= this.docs().length || maxCountReached()) &&
+          videoVariant,
+        'invalid-file-size': invalidFileSize(),
+        unsupported: unsupported() || invalidFileSize(),
+        smallView: this.smallView() && !dragMode(),
+      }"
+    >
+      <!-- Drop Zone -->
+      <div class="drop-zone" (click)="handleClickToAdd()">
+        @if (dragMode()) {
+          <div class="drag-icons-container">
+            @if (isDocumentsMode()) {
+              <svg-icon
+                name="cai-drop-zone-focus"
+                class="illustration drag-icon-document"
+              ></svg-icon>
+            } @else {
+              <!-- Animation -->
+              <ng-lottie
+                [options]="{
+                  path: variant() | dropZoneAnimation,
+                  loop: false,
+                  autoplay: false,
+                }"
+                (animationCreated)="animationCreated($event)"
+              ></ng-lottie>
+            }
+          </div>
+          <div class="drop-zone-focus-text">
+            @if (isDocumentsMode()) {
+              <p class="heading">DRAG FILES HERE</p>
+            } @else if (documentVariant || videoVariant) {
+              <p class="heading">
+                {{ onDragover() ? "DROP FILES HERE" : "DRAG FILES HERE" }}
+              </p>
+            } @else {
+              <p class="heading">
+                {{ onDragover() ? "DROP IMAGE HERE" : "DRAG IMAGE HERE" }}
+              </p>
+            }
+          </div>
+        } @else {
+          @let svgIcon = variant() | dropZoneAnimation: true;
+          <svg-icon [name]="svgIcon" class="illustration"></svg-icon>
+          @if (
+            (countFiles <= this.docs().length || maxCountReached()) &&
+            documentVariant
+          ) {
+            <div class="drop-zone-text">
+              <p class="heading">
+                <span class="line">MAX COUNT</span>
+                <span class="line">REACHED</span>
+              </p>
+              <p class="subtext">
+                <span class="line">{{ countFiles }} FILES </span>
+                <span class="line">IMPORTED</span>
+              </p>
+            </div>
+          } @else {
+            <div class="drop-zone-text">
+              <p class="heading">
+                @if (documentVariant || videoVariant) {
+                  DRAG FILES
+                  @if (docCount < 1 || isDocumentsMode()) {
+                    <span>HERE</span>
+                  }
+                } @else if (profileVariant && roundedBorder) {
+                  DRAG IMAGE
+                } @else {
+                  DRAG IMAGE HERE
+                }
+              </p>
+              @if (!coverPreview && !profilePreview) {
+                <p class="subtext">OR CLICK TO ADD</p>
+              }
+              @if (coverPreview || profilePreview) {
+                <p class="subtext">OR CLICK TO REPLACE</p>
+              }
+              @if (videoVariant) {
+                <p class="video-subtext">max file size {{ maxFileSize() }}mb</p>
+              }
+            </div>
+            @if (isDocumentsMode()) {
+              <button
+                class="cancel-button-documents"
+                ngbTooltip="Cancel"
+                [placement]="'bottom'"
+                container="body"
+                triggers="mouseenter:mouseleave"
+                tooltipClass="tooltip tooltip-m-b-2"
+              >
+                <svg-icon
+                  name="cai-cancel"
+                  class="cancel-icon"
+                  (click)="onCancel($event)"
+                ></svg-icon>
+              </button>
+            }
+          }
+        }
+        <input
+          type="file"
+          aria-hidden="true"
+          multiple
+          class="drop-zone-input"
+          #inputRef
+          (input)="onInput($event)"
+          (change)="fileChangeEvent($event)"
+        />
+      </div>
+
+      <!-- Drop Zone Error -->
+      <div class="drop-zone-error">
+        @if (invalidFileSize()) {
+          <div class="drop-zone-text">
+            <p class="heading invalid">INVALID FILE SIZE</p>
+            <p class="subtext">MAX {{ maxFileSize() }} MB</p>
+          </div>
+        } @else {
+          <div class="drop-zone-text">
+            <p class="heading invalid">INVALID FILE TYPE</p>
+            <p class="subtext">SUPPORTED FORMATS</p>
+          </div>
+          <div class="file-types">
+            @for (type of supportedFileTypes(); track $index) {
+              <p
+                class="badge"
+                [class]="{
+                  pdf: type === 'pdf',
+                  video: ['avi', 'mp4', 'mov'].includes(type),
+                  image: ['jpg', 'png', 'jpeg', 'gif'].includes(type),
+                }"
+              >
+                {{ type }}
+              </p>
+            }
+          </div>
+        }
+        <button class="cancel-button">
+          <svg-icon
+            name="cai-cancel"
+            class="cancel-icon"
+            (click)="cancel()"
+          ></svg-icon>
+        </button>
+      </div>
+    </div>
+  }
+  @if (isLoadingSkeleton()) {
+    <!-- Skeleton -->
+    <ng-container *ngTemplateOutlet="skeletonTemplate"></ng-container>
+  } @else {
+    <!-- Carousel -->
+    @if (docCount > 0 && (documentVariant || videoVariant)) {
+      <div #docsViewport class="docs">
+        <div
+          class="doc-container"
+          [class.documents-container-grid]="isDocumentsMode()"
+          [style.transform]="isDocumentsMode() ? '' : carouselTransform()"
+          [style.--carousel-index]="isDocumentsMode() ? null : carouselIndex()"
+        >
+          @for (doc of docs(); track doc.fileId) {
+            <cai-document-preview
+              [class.doc-visible]="
+                isDetailsSlider() && $index === carouselIndex()
+              "
+              [class.doc-hidden]="
+                isDetailsSlider() && $index !== carouselIndex()
+              "
+              [file]="doc"
+              (onDelete)="handleDelete($event)"
+              (onDownload)="handleDownload($event)"
+              (onTagChange)="handleTagChange($event)"
+              class="doc"
+              [file]="doc"
+              (onDelete)="handleDelete($event)"
+              (onDownload)="handleDownload($event)"
+              (onTagChange)="handleTagChange($event)"
+              (onFileNameChange)="handleFileNameChange($event)"
+              (onDocumentPreviewClick)="handleDocumentPreviewClick($event)"
+              [tags]="documentTags()"
+              [searchText]="searchText()"
+              [cdlDetailsMode]="isDetailsSlider()"
+              [multipleDetailsDocs]="isDetailsSlider() && docCount > 1"
+              [drawerMode]="isDrawerMode()"
+              [isCoverDetails]="isCoverDetails()"
+              [viewMode]="isDocumentsMode() ? 'large' : 'small'"
+            ></cai-document-preview>
+          }
+        </div>
+        @if (docCount >= 3 || (isDetailsSlider() && docCount > 1)) {
+          <button
+            class="carousel-button carousel-left"
+            type="button"
+            (click)="carouselLeft()"
+            [disabled]="carouselIndex() === 0"
+            [style.opacity]="carouselIndex() === 0 ? '0' : '1'"
+          >
+            <svg-icon name="cai-arrow-secondary-left" class="arrow"></svg-icon>
+          </button>
+          <button
+            class="carousel-button carousel-right"
+            type="button"
+            (click)="carouselRight()"
+            [disabled]="isCarouselAtEnd()"
+            [style.opacity]="isCarouselAtEnd() ? '0' : '1'"
+          >
+            <svg-icon name="cai-arrow-secondary-right" class="arrow"></svg-icon>
+          </button>
+        }
+        @if (isDetailsSlider() && docCount > 1) {
+          <div class="sliders">
+            @for (doc of docs(); track $index) {
+              <div
+                class="slider-item"
+                (click)="carouselIndex.set($index)"
+                [class.active]="$index === carouselIndex()"
+              ></div>
+            }
+          </div>
+        }
+      </div>
+    }
+  }
+</div>
+
+<!-- Skeleton Template -->
+
+<ng-template #skeletonTemplate>
+  <div
+    class="skeleton-container"
+    [ngClass]="{
+      'documents-container-grid': isDocumentsMode(),
+      'drawer-position': isDrawerMode(),
+    }"
+  >
+    @for (item of skeletonItems(); track $index) {
+      <div class="skeleton-item">
+        <div class="skeleton-bar"></div>
+      </div>
+    }
+  </div>
+</ng-template>

package/projects/carriera-intern-components/src/app/components/drop-zone/drop-zone.component.scss

@@ -0,0 +1,9 @@
+@use "variables" as *;
+
+@use "./utils/styles/drop-zone-documents.scss" as *;
+@use "./utils/styles/drop-zone-cropper.scss" as *;
+@use "./utils/styles/drop-zone-layout.scss" as *;
+@use "./utils/styles/drop-zone-images.scss" as *;
+@use "./utils/styles/drop-zone-drag-mode.scss" as *;
+@use "./utils/styles/drop-zone-variations.scss" as *;
+@use "./utils/styles/drop-zone-states.scss" as *;

package/projects/carriera-intern-components/src/app/components/drop-zone/drop-zone.component.spec.ts

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