carriera-intern 0.0.0 → 1.1.76

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

@@ -1,63 +0,0 @@
-@let signatureRequired = signatureNeeded() === true; @let signatureImage =
-showSignaturePreview() === true ; @let showSignature = showSignaturePad() ===
-true; @let showErrorRequired = showError() === true; @let signUrl = signatureUrl === "";
-
-<div class="container">  
-  @if(signatureImage){
-  <div class="signature-preview">
-    <div class="signature-image">
-      <img [src]="signatureUrl" width="500" height="170" alt="" />
-    </div>
-    <div class="signature-preview-buttons">
-      <button (click)="editSignature()">
-        <svg-icon class="edit-icon" name="cai-edit"></svg-icon>
-      </button>
-      <button (click)="deleteSignature()">
-        <svg-icon class="delete-icon" name="cai-delete"></svg-icon>
-      </button>
-    </div>
-  </div>
-  }
-  <div class="signaturePad" [class]="{ showPad: showSignature }">
-    <canvas #canvas class="sign-canvas" height="170"> </canvas>
-    <div class="buttons">
-      <div class="left-buttons" [class]="{ noLabel: !signatureRequired }">
-        <button (click)="cancelSignature()">CANCEL</button>
-        <button (click)="undoSignature()">UNDO</button>
-        @if(signatureRequired){
-        <label>Confirmation Required</label>
-        }
-      </div>
-      <div class="right-buttons">
-        <button (click)="useSaved()" class="saved-button">
-          USE SAVED SIGNATURE
-        </button>
-        <button (click)="confirmSignature()" class="submit-button">
-          CONFIRM
-        </button>
-      </div>
-    </div>
-  </div>
-
-  @if(!showErrorRequired && signUrl){
-  <div class="signature-container">
-    <div class="signature" (click)="handleSignature()">
-      <div class="signature-text">
-        <p class="sign-header">CLICK HERE</p>
-        <p class="sign-body">TO SIGN USING YOUR MOUSE</p>
-      </div>
-    </div>
-  </div>
-    }
-
-  @if(showErrorRequired && !signatureImg){
-  <div class="signature-container">
-    <div class="signature-error" (click)="handleSignatureError()">
-      <div class="signature-text">
-        <p class="sign-error-header">SIGNATURE REQUIRED</p>
-        <p class="sign-body">CLICK HERE TO SIGN USING YOUR MOUSE</p>
-      </div>
-    </div>
-  </div>
-  }
-</div>

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

@@ -1,229 +0,0 @@
-@use "variables" as *;
-
-.container {
-  padding: 4px 6px;
-  min-width: 480px;
-  display: flex;
-  gap: 8px;
-  position: relative;
-}
-
-.signature-container {
-  position: relative;
-  flex: 1 0 auto;
-}
-
-.signature {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  outline: 4px dashed $color-surface-input-neutral;
-  border-radius: 2px;
-  padding: 35px 0;
-  margin: 4px;
-  gap: 10px;
-  height: 186px;
-
-  transition: background-color 0.2s ease-in-out;
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: $color-surface-input-neutral;
-  }
-}
-
-.signature-error {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  outline: 4px dashed $color-inverse-text-base-negative;
-  border-radius: 2px;
-  padding: 35px 0;
-  margin: 4px;
-  gap: 10px;
-  height: 186px;
-  transition: background-color 0.2s ease-in-out;
-
-  cursor: pointer;
-}
-
-.signature-text {
-  user-select: none;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  .sign-header {
-    color: $color-text-base-heading;
-    font-weight: 700;
-    font-size: 14px;
-    line-height: 18px;
-  }
-  .sign-body {
-    color: $color-text-base-heading;
-    font-weight: 600;
-    font-size: 11px;
-    line-height: 14px;
-  }
-  .sign-error-header {
-    @extend .sign-header;
-    color: $color-text-base-negative !important;
-  }
-}
-
-.signaturePad {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  flex-direction: column;
-  z-index: -1;
-  opacity: 0;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 216px;
-  padding: 4px 6px 4px 6px;
-
-  .sign-canvas {
-    border: 4px dashed $color-icon-base-disable;
-    border-radius: 2px;
-    background-color: $color-text-base-inverse;
-    width: 100%;
-    height: 170px;
-    display: block;
-  }
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    gap: 12px;
-
-    .left-buttons,
-    .right-buttons {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .noLabel button {
-      flex-grow: 1;
-    }
-
-    .left-buttons {
-      flex-grow: 1;
-
-      button {
-        background-color: $color-surface-input-neutral;
-        color: $color-inverse-icon-base-disable;
-        min-width: 80px;
-        border-radius: 2px;
-        padding: 4px;
-        height: 22px;
-        font-weight: 700;
-        font-size: 11px;
-        line-height: 14px;
-      }
-      label {
-        font-weight: 600;
-        font-size: 11px;
-        line-height: 15px;
-        color: $color-text-base-negative;
-        margin-left: auto;
-        white-space: nowrap;
-      }
-    }
-    .right-buttons {
-      button {
-        background-color: $color-surface-input-neutral;
-        color: $color-inverse-icon-base-disable;
-        min-width: 80px;
-        border-radius: 2px;
-        padding: 4px;
-        height: 22px;
-        font-weight: 700;
-        font-size: 11px;
-        line-height: 14px;
-        text-wrap: nowrap;
-        text-align: center;
-      }
-      .saved-button {
-        background-color: $color-surface-input-neutral;
-        color: #3b73ed;
-      }
-      .submit-button {
-        background-color: #3b73ed;
-        color: $color-text-base-inverse;
-      }
-    }
-  }
-}
-
-.showPad {
-  opacity: 1 !important;
-  z-index: 1000 !important;
-}
-
-.showPad + .signature-container {
-  opacity: 0 !important;
-}
-
-.signature-preview {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  flex-direction: row;
-  z-index: 1000;
-  opacity: 1;
-  position: absolute;
-  width: 100%;
-  padding: 4px 6px 4px 6px;
-  background-color: #ffffff;
-
-  .signature-image {
-    height: 170px;
-    border-bottom: 1px solid $color-surface-input-neutral-hover;
-    padding: 4px;
-
-    img {
-      height: 100%;
-      border-radius: 3px;
-      transition: background-color 0.2s ease;
-    }
-  }
-
-  .signature-preview-buttons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-    button {
-      border-radius: 2px;
-      padding: 4px;
-      background-color: $color-surface-input-neutral;
-      color: $color-text-base-content-subtle;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-  }
-}
-
-.signature-preview:hover {
-  .signature-image img {
-    background-color: $color-surface-input-neutral;
-  }
-
-  .signature-preview-buttons button {
-    pointer-events: auto;
-    opacity: 1;
-  }
-}

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

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

package/projects/carriera-intern-components/src/app/components/signature/signature.component.ts

@@ -1,102 +0,0 @@
-import { Component, ElementRef, signal, ViewChild } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { SvgIconComponent } from 'angular-svg-icon';
-import SignaturePad, { PointGroup } from 'signature_pad';
-
-@Component({
-  selector: 'cai-signature',
-  imports: [SvgIconComponent],
-  templateUrl: './signature.component.html',
-  styleUrl: './signature.component.scss',
-})
-export class SignatureComponent {
-  @ViewChild('canvas') canvasEl!: ElementRef<HTMLCanvasElement>;
-  signaturePad!: SignaturePad;
-  showSignaturePad = signal<boolean>(false);
-
-  signatureNeeded = signal<boolean>(true);
-  showSignaturePreview = signal<boolean>(false);
-  signatureImg: string = '';
-  signatureUrl: string = '';
-  showError = signal<boolean>(false);
-  signatureObject: PointGroup[] = [];
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  ngAfterViewInit() {
-    this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
-
-    this.signaturePad.addEventListener('endStroke', () => {
-      const all = this.signaturePad.toData();
-      const oldLength = this.signatureObject.length;
-      const newStrokes = all.slice(oldLength);
-      this.signatureObject.push(...newStrokes);
-      this.signatureImg = this.signaturePad.toDataURL();
-
-      if (this.signatureImg !== this.signatureUrl) {
-        this.signatureNeeded.set(true);
-      }
-    });
-  }
-
-  cancelSignature() {
-    this.signatureUrl = '';
-    this.signatureImg = '';
-    if (!this.signatureNeeded()) return;
-    if (this.signatureNeeded()) {
-      this.showError.set(true);
-    }
-    this.signaturePad.clear();
-    this.showSignaturePad.set(false);
-  }
-
-  undoSignature() {
-    if (this.signatureObject.length == 0) return;
-    const data = this.signatureObject;
-    if (this.signatureObject.length) {
-      this.signatureObject.pop();
-      this.signaturePad.fromData(this.signatureObject);
-      this.signatureImg = this.signaturePad.toDataURL();
-      this.signatureNeeded.set(true);
-    }
-  }
-  confirmSignature() {
-    if (this.signaturePad.isEmpty()) return;
-
-    this.signatureObject = this.signaturePad.toData();
-    this.signatureImg = this.signaturePad.toDataURL();
-    this.signatureUrl = this.signatureImg;
-    this.signatureUrl = this.signatureImg;
-
-    this.showError.set(false);
-    this.signatureNeeded.set(false);
-    this.showSignaturePreview.set(true);
-    this.showSignaturePad.set(false);
-  }
-
-  editSignature() {
-    this.signaturePad.fromData(this.signatureObject);
-    this.showSignaturePad.set(true);
-    this.showSignaturePreview.set(false);
-  }
-
-  deleteSignature() {
-    this.signatureObject = [];
-    this.signaturePad.fromData(this.signatureObject);
-    this.signatureImg = '';
-    this.signatureNeeded.set(true);
-    this.signatureUrl = '';
-    this.showSignaturePreview.set(false);
-  }
-
-  useSaved() {}
-
-  handleSignatureError() {
-    this.signaturePad.fromData(this.signatureObject);
-    this.showSignaturePad.set(true);
-  }
-
-  handleSignature() {
-    this.showSignaturePad.set(true);
-  }
-}

package/projects/carriera-intern-components/src/app/components/signature/signature.stories.ts

@@ -1,32 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { SignatureComponent } from './signature.component';
-
-const meta: Meta<SignatureComponent> = {
-  title: 'Components/Signature',
-  component: SignatureComponent,
-  tags: ['autodocs'],
-  decorators: [],
-  argTypes: {
-
-  },
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<SignatureComponent>;
-
-// --- Stories ---
-
-export const Signature: Story = {
-  args: {  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-      <div style="width: 640px">
-        <cai-signature></cai-signature>
-      </div>
-    `,
-  }),
-};

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/enums/index.ts

@@ -1 +0,0 @@
-export * from './scroll-state.enum';

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/enums/scroll-state.enum.ts

@@ -1,6 +0,0 @@
-export enum eScrollState {
-  START = 'start',
-  SCROLLING = 'scrolling',
-  END = 'end',
-  NOT_NEEDED = 'not_needed',
-}

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/sticky-scrollbar.component.html

@@ -1,29 +0,0 @@
-<div class="sticky-scrollbar-wrapper">
-  <div
-    #scrollContainer
-    class="sticky-scrollbar-container"
-    cdkScrollable
-    tabindex="-1"
-  >
-    <ng-content></ng-content>
-  </div>
-  @if (alwaysVisible && !isContainerInView()) {
-    <div class="sticky-scrollbar-placeholder"></div>
-  }
-  <div
-    class="sticky-scrollbar-track"
-    [class.hidden]="hideTrack"
-    [class.always-visible]="alwaysVisible"
-    [class.fixed-mode]="alwaysVisible && !isContainerInView()"
-    [style.bottom.px]="stickyOffset"
-  >
-    <div
-      #scrollThumb
-      class="sticky-scrollbar-thumb"
-      [class.dragging]="isDragging"
-      [class.hidden-thumb]="hideThumb"
-      (mousedown)="onThumbMouseDown($event)"
-      (mouseup)="onThumbMouseUp()"
-    ></div>
-  </div>
-</div>

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/sticky-scrollbar.component.scss

@@ -1,106 +0,0 @@
-@use "../../../styles/variables" as *;
-
-.sticky-scrollbar-wrapper {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  overscroll-behavior-x: none;
-}
-
-.sticky-scrollbar-container {
-  flex: 1;
-  width: fit-content;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-x: none;
-  contain: layout style paint;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.sticky-scrollbar-placeholder {
-  height: 14px;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.sticky-scrollbar-track {
-  position: sticky;
-  bottom: 0;
-  width: 100%;
-  height: 14px;
-  display: flex;
-  align-items: center;
-  border-radius: 2px;
-  margin-top: 0;
-  margin-bottom: 0;
-  transition: opacity 100ms ease-in-out;
-  z-index: 10;
-
-  &.hidden {
-    display: none;
-  }
-
-  &.always-visible {
-    z-index: 1000;
-
-    &.fixed-mode {
-      margin: 0;
-    }
-  }
-
-  &:hover {
-    .sticky-scrollbar-thumb {
-      height: 6px;
-      background-color: #424242b2;
-    }
-  }
-}
-
-.sticky-scrollbar-thumb {
-  position: relative;
-  height: 2px;
-  background-color: #aaaaaa;
-  border-radius: 2px;
-  transition:
-    background-color 100ms ease-in-out,
-    opacity 100ms ease-in-out,
-    height 100ms ease-in-out;
-  min-width: 30px;
-  will-change: transform, width, opacity;
-  transform: translateZ(0);
-
-  opacity: 1;
-
-  @starting-style {
-    opacity: 0;
-  }
-
-  &.hidden-thumb {
-    opacity: 0;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    bottom: -6px;
-    left: -4px;
-    right: -4px;
-    pointer-events: auto;
-  }
-
-  &:hover,
-  &.dragging {
-    background-color: #424242b2;
-    height: 6px;
-  }
-}

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/sticky-scrollbar.component.spec.ts

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