carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/drop-zone/enums/drop-zone-variant.enum.ts

@@ -1,7 +0,0 @@
-export enum DropZoneVariant {
-  DOCUMENT = 'document',
-  VIDEO = 'video',
-  PROFILE = 'profile',
-  COVER = 'cover',
-  LOGO = 'logo',
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/enums/index.ts

@@ -1 +0,0 @@
-export * from './drop-zone-variant.enum';

package/projects/carriera-intern-components/src/app/components/drop-zone/models/app-file.model.ts

@@ -1,28 +0,0 @@
-const supportedFileTypes = [
-  'mp4',
-  'mov',
-  'avi',
-  'pdf',
-  'jpg',
-  'jpeg',
-  'png',
-  'gif',
-] as const;
-
-export type FileExtension = (typeof supportedFileTypes)[number];
-
-export interface AppFile {
-  fileId?: number;
-  fileName: string;
-  baseName: string;
-  type: FileExtension;
-  size: number; // File size in bytes
-  imagePreviewUrl?: string;
-  pageCount?: number; // PDF Only
-  file: File | null;
-  tags: number[] | null;
-  tagChanged: boolean;
-  fileNameChanged: boolean;
-  categoryTag: string | null;
-  base64Url?: string | null;
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/models/file.response.ts

@@ -1,10 +0,0 @@
-export interface FileResponse {
-    fileId?: number;
-    fileName?: string | null;
-    url?: string | null;
-    fileSize?: number | null;
-    tags?: Array<string> | null;
-    tagGeneratedByUser?: boolean;
-    updatedAt?: string | null;
-    companyUserId?: number | null;
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/models/index.ts

@@ -1,2 +0,0 @@
-export * from './app-file.model';
-export * from './file.response';

package/projects/carriera-intern-components/src/app/components/drop-zone/pipes/drag-mode-animation.pipe.ts

@@ -1,40 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DropZoneVariant } from '../enums';
-
-@Pipe({
-  name: 'dropZoneAnimation',
-})
-export class DragModeAnimationPipe implements PipeTransform {
-  private readonly animationPaths: Record<DropZoneVariant, string> = {
-    [DropZoneVariant.DOCUMENT]:
-      '/assets/carriera-intern-components/animations/animation-document-update.json',
-    [DropZoneVariant.VIDEO]:
-      '/assets/carriera-intern-components/animations/animation-media.json',
-    [DropZoneVariant.PROFILE]:
-      '/assets/carriera-intern-components/animations/animation-image.json',
-    [DropZoneVariant.COVER]:
-      '/assets/carriera-intern-components/animations/animation-image.json',
-    [DropZoneVariant.LOGO]:
-      '/assets/carriera-intern-components/animations/animation-logo.json',
-  };
-
-  private readonly svgIconPaths: Record<DropZoneVariant, string> = {
-    [DropZoneVariant.LOGO]: 'cai-illustration-drop-zone-cover',
-    [DropZoneVariant.COVER]: 'cai-illustration-drop-zone-cover',
-    [DropZoneVariant.VIDEO]: 'cai-illustration-drop-zone-video',
-    [DropZoneVariant.PROFILE]: 'cai-illustration-drop-zone-profile',
-    [DropZoneVariant.DOCUMENT]: 'cai-illustration-drop-zone',
-  };
-
-  transform(variant?: string, svgIcon: boolean = false): string {
-    if (!variant) {
-      return '';
-    }
-
-    if (svgIcon) {
-      return this.svgIconPaths[variant as DropZoneVariant] ?? '';
-    }
-
-    return this.animationPaths[variant as DropZoneVariant] ?? '';
-  }
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/utils/helpers/drop-zone-documents.helper.ts

@@ -1,67 +0,0 @@
-import type { AppFile, FileResponse } from '../../models';
-
-export class DropZoneDocumentsHelper {
-  static fileToBase64(file: File | null): Promise<string | null> {
-    if (!file) return Promise.resolve(null);
-
-    return new Promise<string | null>((resolve, reject) => {
-      const reader = new FileReader();
-
-      reader.onload = () => {
-        const result = reader.result as string | null;
-        const base64 = result?.split(',')[1] ?? null;
-        resolve(base64);
-      };
-
-      reader.onerror = () => {
-        reject(reader.error ?? new Error('Failed to read file as base64.'));
-      };
-
-      reader.readAsDataURL(file);
-    });
-  }
-
-  static splitExistingAndNewFiles(
-    currentFiles: (FileResponse | AppFile)[],
-    existingDocsSource: AppFile[],
-  ): FileResponse[] {
-    const existingFileIds = existingDocsSource
-      .filter((doc) => doc.fileId != null)
-      .map((doc) => doc.fileId);
-
-    const newFiles = currentFiles.filter(
-      (file) => !existingFileIds.includes((file as AppFile).fileId),
-    ) as FileResponse[];
-
-    return newFiles;
-  }
-
-  static async fetchFileAsFile(
-    fileResponse: FileResponse,
-  ): Promise<File | null> {
-    if (!fileResponse.url || !fileResponse.fileName) return null;
-
-    try {
-      const response = await fetch(fileResponse.url);
-      const blob = await response.blob();
-      return new File([blob], fileResponse.fileName, {
-        type: blob.type,
-      });
-    } catch (error) {
-      return null;
-    }
-  }
-
-  static onDownloadAllFiles(docs: AppFile[]): void {
-    docs.map((doc) => {
-      fetch(doc.imagePreviewUrl!).then((res) => {
-        res.blob().then((b) => {
-          const a = document.createElement('a');
-          a.href = URL.createObjectURL(b);
-          a.download = doc.fileName;
-          a.click();
-        });
-      });
-    });
-  }
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/utils/helpers/index.ts

@@ -1 +0,0 @@
-export * from './drop-zone-documents.helper';

package/projects/carriera-intern-components/src/app/components/drop-zone/utils/styles/drop-zone-cropper.scss

@@ -1,202 +0,0 @@
-@use "variables" as *;
-
-.cropper-overlay {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  background-color: #ffffff;
-  align-items: center;
-  z-index: 2000;
-  gap: 4px;
-  opacity: 1;
-  top: 0;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  height: 212px;
-
-  .img-cropper {
-    width: 100%;
-    height: 178px;
-    padding: 0px;
-  }
-
-  .lower-part {
-    display: flex;
-    place-items: center;
-    align-items: center;
-    margin-left: 3px;
-    margin-right: 3px;
-    width: 100%;
-    gap: 12px;
-    .range {
-      width: 100%;
-      height: 22px;
-      display: flex;
-      align-items: center;
-      input[type="range"] {
-        width: 100%;
-      }
-
-      input[type="range"] {
-        -webkit-appearance: none;
-        appearance: none;
-        border-radius: 2px;
-        --range-active-color: #6692f1;
-        --range-progress: 50%;
-        background: transparent;
-        cursor: pointer;
-      }
-    }
-
-    .cropper-buttons {
-      display: flex;
-      justify-content: start;
-      gap: 6px;
-      .cancel-button,
-      .submit-button {
-        padding: 4px;
-        width: 80px;
-        font-size: 14px;
-        border-radius: 2px;
-        text-transform: uppercase;
-        line-height: 14px;
-        font-weight: 700;
-        font-size: 11px;
-        cursor: pointer;
-      }
-
-      .cancel-button {
-        background-color: $color-surface-input-neutral;
-        color: $color-inverse-icon-base-disable;
-        transition:
-          background-color 0.3s ease-in-out,
-          color 0.3s ease-in-out;
-
-        &:hover {
-          background-color: $color-text-base-heading;
-          color: $color-text-base-inverse;
-        }
-
-        &:active {
-          background-color: $color-surface-input-neutral-focus;
-          color: $color-text-base-inverse;
-        }
-      }
-
-      .submit-button {
-        background-color: $color-blue-500;
-        color: $color-text-base-inverse;
-        transition:
-          background-color 0.3s ease-in-out,
-          color 0.3s ease-in-out;
-
-        &:hover {
-          background-color: $color-surface-input-positive-focus;
-          color: $color-text-base-inverse;
-        }
-
-        &:active {
-          background-color: $color-blue-900;
-          color: $color-text-base-inverse;
-        }
-      }
-    }
-  }
-}
-
-.cropper-loader {
-  position: absolute;
-  z-index: 1100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: $color-white-50;
-  width: 100%;
-  height: 100%;
-
-  .spinner {
-    width: 48px;
-    height: 48px;
-    border: 5px solid $color-black-100-20;
-    border-top: 5px solid $color-blue-500;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-}
-
-.hasCropper {
-  height: 204px !important;
-  position: relative;
-}
-
-input[type="range"]:hover {
-  --range-active-color: $color-blue-500;
-}
-
-input[type="range"]:active {
-  --range-active-color: $color-blue-700;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  margin-top: -7px;
-  background-color: $color-text-base-inverse;
-  height: 20px;
-  width: 30px;
-  box-shadow: 0px 0px 4px 0px #00000026;
-  background-image: url("/assets/icons/Thumb.svg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 14px 18px;
-  border-radius: 2px;
-  transition: background-color 0.3s ease-in-out;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    var(--range-active-color) 0%,
-    var(--range-active-color) var(--range-progress),
-    $color-surface-input-neutral var(--range-progress),
-    $color-surface-input-neutral 100%
-  );
-  height: 6px;
-  transition: background 0.3s ease-in-out;
-}
-
-input[type="range"]:hover::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    $color-blue-500 0%,
-    $color-blue-500 var(--range-progress),
-    $color-surface-input-neutral var(--range-progress),
-    $color-surface-input-neutral 100%
-  );
-}
-
-input[type="range"]:active::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    $color-blue-700 0%,
-    $color-blue-700 var(--range-progress),
-    $color-surface-input-neutral var(--range-progress),
-    $color-surface-input-neutral 100%
-  );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
-  cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
-  background-image: url("/assets/icons/Thumb-active.svg");
-  cursor: grabbing;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/utils/styles/drop-zone-documents.scss

@@ -1,166 +0,0 @@
-@use "variables" as *;
-
-.container.is-documents-mode {
-  width: 100% !important;
-  max-width: 100% !important;
-
-  .drop-zone-container {
-    .drop-zone {
-      width: 100% !important;
-    }
-  }
-}
-
-.documents-drag-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 10;
-}
-
-.is-documents-mode {
-  display: flex;
-  flex-direction: column;
-  gap: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-
-  .drop-zone-container {
-    display: flex;
-    margin-bottom: 4px;
-    background-color: $color-white-100;
-    z-index: 20;
-
-    .drop-zone {
-      width: 100%;
-      height: 120px !important;
-      background-color: $color-text-transparent;
-      outline-color: $color-white-500;
-      transition: background-color 0.2s ease-in-out;
-
-      &:hover {
-        background-color: $color-white-50 !important;
-      }
-
-      .illustration {
-        width: 80px;
-        height: 80px;
-      }
-
-      .drop-zone-text {
-        .heading {
-          padding-bottom: 0;
-        }
-      }
-
-      .cancel-button-documents {
-        z-index: 1000;
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        width: 26px;
-        height: 26px;
-        background-color: transparent;
-        padding: 4px;
-        .cancel-icon {
-          width: 18px;
-          height: 18px;
-          color: $color-text-base-content-subtle;
-        }
-
-        &:hover {
-          .cancel-icon {
-            color: $color-black-300;
-          }
-        }
-      }
-    }
-  }
-
-  .skeleton-container {
-    .skeleton-item {
-      width: 100%;
-      height: auto;
-      aspect-ratio: 1 / 1;
-      max-width: 100%;
-      min-width: 302px;
-      min-height: 302px;
-      position: relative;
-      border-radius: 3px;
-      background-color: $color-white-50;
-
-      .skeleton-bar {
-        position: absolute;
-        bottom: 8px;
-        left: 8px;
-        right: 8px;
-        width: auto;
-        height: 26px;
-        background-color: $color-black-100-20;
-        animation: skeleton-pulse 1s ease-in-out infinite alternate;
-        border-radius: 2px;
-      }
-    }
-  }
-  .docs {
-    width: 100% !important;
-    position: static !important;
-    overflow: visible !important;
-
-    .doc-container {
-      .doc {
-        height: auto !important;
-      }
-    }
-
-    .carousel-button {
-      display: none;
-    }
-  }
-
-  .doc-container.documents-container-grid,
-  .skeleton-container.documents-container-grid {
-    display: grid;
-    width: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
-    gap: 4px;
-    justify-items: stretch;
-    align-items: start;
-
-    @media (min-width: 801px) and (max-width: 1001px) {
-      grid-template-columns: repeat(2, minmax(302px, 1fr));
-    }
-
-    @media (min-width: 1002px) and (max-width: 1307px) {
-      grid-template-columns: repeat(3, minmax(302px, 1fr));
-    }
-
-    @media (min-width: 1308px) and (max-width: 1613px) {
-      grid-template-columns: repeat(4, minmax(302px, 1fr));
-    }
-
-    @media (min-width: 1614px) and (max-width: 1920px) {
-      grid-template-columns: repeat(5, minmax(302px, 1fr));
-    }
-
-    @media (min-width: 1921px) and (max-width: 2227px) {
-      grid-template-columns: repeat(6, minmax(302px, 1fr));
-    }
-
-    @media (min-width: 2228px) {
-      grid-template-columns: repeat(auto-fit, minmax(302px, 1fr));
-    }
-  }
-}
-
-@keyframes skeleton-pulse {
-  0% {
-    background-color: $color-black-100-20;
-  }
-  100% {
-    background-color: #91919120;
-  }
-}

package/projects/carriera-intern-components/src/app/components/drop-zone/utils/styles/drop-zone-drag-mode.scss

@@ -1,107 +0,0 @@
-@use "variables" as *;
-
-.container.dragMode {
-  position: fixed;
-  inset: 0;
-  z-index: 99999999 !important;
-  height: 100% !important;
-  width: 100% !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: $color-white-50 !important;
-
-  .avatar,
-  .profile-container,
-  .logo-container,
-  .cover-container {
-    display: none;
-  }
-  .docs {
-    display: none;
-  }
-  .drop-zone-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    flex: 1 1 100%;
-    .drop-zone {
-      flex-direction: column;
-      height: 100%;
-      outline: none !important;
-      margin: 0 !important;
-      border: 4px dashed $color-white-700;
-      border-color: $color-white-700;
-
-      .illustration,
-      svg {
-        width: 200px !important;
-        height: 200px !important;
-        pointer-events: none !important;
-      }
-      .drag-icons-container {
-        position: relative;
-
-        .drag-icon-document {
-          width: 80px !important;
-          height: 80px !important;
-
-          svg {
-            width: 80px !important;
-            height: 80px !important;
-          }
-        }
-
-        ng-lottie {
-          width: 200px;
-          height: 200px;
-          display: block;
-        }
-      }
-      .drop-zone-focus-text {
-        margin-top: 32px;
-        .heading {
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 18px;
-        }
-      }
-    }
-  }
-  &:hover {
-    .drop-zone {
-      background-color: $color-white-50 !important;
-    }
-  }
-
-  &.onDragover {
-    .drop-zone-container {
-      .drop-zone {
-        border-color: $color-white-700;
-      }
-    }
-  }
-}
-
-// Documents
-.is-documents-mode {
-  .dragMode {
-    height: 120px !important;
-  }
-}
-
-.dragModeDocuments {
-  .drop-zone-container {
-    .drop-zone {
-      background-color: $color-white-50 !important;
-
-      .drop-zone-focus-text {
-        .heading {
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 18px;
-        }
-      }
-    }
-  }
-}