carriera-intern 0.0.0 → 1.1.76

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

@@ -1,376 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-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();
-  });
-});