carriera-intern 0.0.0

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

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

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

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

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

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

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

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

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

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

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

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