carriera-intern 0.0.0

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

@@ -0,0 +1,170 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CopyComponent } from '../copy.component';
+import { SvgIconComponent } from 'angular-svg-icon';
+import { eAlignment } from '../../../enums';
+import { AvatarComponent } from '../../avatar/avatar.component';
+const meta: Meta<CopyComponent> = {
+  title: 'Components/Copy',
+  component: CopyComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [SvgIconComponent, AvatarComponent],
+    }),
+  ],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<CopyComponent>;
+
+// --- Stories ---
+
+const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius justo elit. Donec vehicula massa nec diam tincidunt molestie. Praesent ac sagittis sem, iaculis blandit arcu. Nunc ac malesuada nisi. Mauris congue ipsum maximus hendrerit semper. Duis gravida et mauris vel maximus. Proin tellus velit, elementum vel justo at, accumsan laoreet mi. Morbi mollis eu ipsum eget eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet consectetur diam. Cras nec risus lectus. Vestibulum tortor mauris, congue sit amet iaculis imperdiet, imperdiet at eros. Vestibulum nulla nulla, finibus eu eros id, ullamcorper auctor mi. Vivamus ornare nisi eget mi iaculis ullamcorper. Vivamus sagittis sagittis lorem, ac tempus ligula aliquet ac. Phasellus ut tempor nisi.`;
+
+export const Default: Story = {
+  args: {
+    value: 'Hello, world!',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-copy [value]="value">
+      <div class="d-flex align-items-center gap-1">
+          <svg-icon [name]="'cai-phone'" class="text-black-100 d-flex justify-content-center align-items-center"></svg-icon>
+          <p class="text-black-300 m-0 p-0 fs-5">Hello, world!</p>
+      </div>
+      </cai-copy>
+    `,
+  }),
+};
+
+export const LeftAligned: Story = {
+  args: {
+    value: 'Hello, world!',
+    alignment: eAlignment.LEFT,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-copy [value]="value" [alignment]="alignment">
+      <div class="d-flex align-items-center gap-1">
+          <svg-icon [name]="'cai-phone'" class="text-black-100 d-flex justify-content-center align-items-center"></svg-icon>
+          <p class="text-black-300 m-0 p-0 fs-5">Hello, world!</p>
+      </div>
+      </cai-copy>
+    `,
+  }),
+};
+
+export const Ellipsis: Story = {
+  args: {
+    value: loremIpsum,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-copy [value]="value">
+          <p class="text-black-300 m-0 p-0 text-truncate" style="max-width: 200px;">${loremIpsum}</p>
+      </cai-copy>
+    `,
+  }),
+};
+
+export const InContainer: Story = {
+  args: {
+    value: loremIpsum,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      driver: {
+        fullName: 'John Doe',
+        avatarColor: 'Gold',
+      },
+    },
+    template: `
+      <div class="d-flex align-items-center gap-1 p-1" style="max-width: 200px; border: 1px solid black;">
+          <cai-avatar [driver]="driver" [size]="74">
+          </cai-avatar>
+          <div style="flex: 1; min-width: 0;">
+            <cai-copy [value]="value" [copyTooltip]="'Copy SSN No.'">
+                <p class="text-black-300 m-0 p-0 text-truncate">${loremIpsum}</p>
+            </cai-copy>
+          </div>
+      </div>
+    `,
+  }),
+};
+
+export const FullArea: Story = {
+  args: {
+    value: 'Hello, world!',
+    alignment: eAlignment.LEFT,
+    copyArea: 'full',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      icon: 'cai-phone',
+    },
+    template: `
+      <cai-copy [value]="value" [alignment]="alignment" [copyArea]="copyArea" [icon]="icon">
+      <div class="d-flex align-items-center gap-1">
+          <p class="text-black-300 m-0 p-0 fs-5">{{ value }}</p>
+      </div>
+      </cai-copy>
+    `,
+  }),
+};
+
+export const Inverse: Story = {
+  args: {
+    value: 'Hello, world!',
+    inverse: true,
+  },
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-copy [value]="value" [inverse]="inverse">
+      <div class="d-flex align-items-center gap-1">
+          <svg-icon [name]="'cai-phone'" class="text-black-100 d-flex justify-content-center align-items-center"></svg-icon>
+          <p class="text-white-500 m-0 p-0 fs-5">Hello, world!</p>
+      </div>
+      </cai-copy>
+    `,
+  }),
+};
+
+export const NoIcon: Story = {
+  args: {
+    value: 'Hello, world!',
+    copyArea: 'full',
+    hasNoIcon: true,
+    tooltipPlacement: 'top',
+    tooltipClass: 'tooltip-bg-red-500',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cai-copy [value]="value" [copyArea]="copyArea" [hasNoIcon]="hasNoIcon" [tooltipPlacement]="tooltipPlacement" [tooltipClass]="tooltipClass">
+      <div class="d-flex align-items-center gap-1">
+          <p class="text-black-300 m-0 p-0 fs-5">{{ value }}</p>
+      </div>
+      </cai-copy>
+    `,
+  }),
+};

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

@@ -0,0 +1,33 @@
+<div
+  class="counter-container"
+  [class.has-value]="value()"
+  (pointerdown)="focus($event)"
+>
+  <input
+    #inputRef
+    class="input"
+    type="text"
+    (input)="onInput($event)"
+    (blur)="onBlur()"
+    (keydown)="onKeydown($event)"
+  />
+
+  <div
+    class="arrows"
+    [class.min]="value() === min()"
+    [class.max]="value() === max()"
+  >
+    <svg-icon
+      name="cai-arrow-primary-up"
+      class="arrow up"
+      [class.key-pressed]="keyPressed() === 'up'"
+      (pointerdown)="increment(1)"
+    ></svg-icon>
+    <svg-icon
+      name="cai-arrow-primary-up"
+      class="arrow down"
+      [class.key-pressed]="keyPressed() === 'down'"
+      (pointerdown)="increment(-1)"
+    ></svg-icon>
+  </div>
+</div>

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

@@ -0,0 +1,197 @@
+@use "variables" as *;
+
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+// Base resets
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+figure,
+pre {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+ul,
+ol {
+  padding-left: 1.5rem;
+  list-style-position: outside;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+// Counter component styles
+.counter-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  height: 34px;
+  width: 100%;
+  padding: 4px 4px 4px 12px;
+  background-color: $color-white-200;
+  border-radius: 2px;
+  cursor: text;
+  transition: background-color 0.1s $bezier;
+
+  &.has-value {
+    background-color: $color-blue-50;
+
+    .input {
+      color: $color-black-300;
+    }
+
+    .arrow:hover,
+    .key-pressed {
+      color: $color-blue-700;
+    }
+
+    .arrows {
+      color: $color-blue-300;
+
+      &.min .down,
+      &.max .up {
+        color: $color-blue-300-40;
+      }
+    }
+  }
+
+  &:has(.input:focus-visible) {
+    background-color: $color-black-700;
+
+    .input {
+      color: $color-white-50;
+    }
+
+    .arrow:hover,
+    .key-pressed {
+      color: $color-white-50;
+    }
+
+    .arrows {
+      color: $color-white-70;
+
+      &.min .down,
+      &.max .up {
+        color: $color-white-40;
+      }
+    }
+
+    &.has-value {
+      background-color: $color-blue-700;
+    }
+  }
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  padding: 0;
+  background-color: transparent;
+  color: $color-black-100;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 22px;
+  transition: color 0.1s $bezier;
+
+  &::selection {
+    background-color: #ffffff4d;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.arrow {
+  cursor: pointer;
+  transition: color 0.1s $bezier;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  &:hover,
+  &.key-pressed {
+    color: $color-black-300;
+  }
+}
+
+.arrows {
+  display: flex;
+  flex-direction: column;
+  color: $color-black-100;
+
+  .up {
+    margin-bottom: -3px;
+  }
+
+  .down {
+    margin-top: -3px;
+    transform: rotate(180deg);
+  }
+
+  &.min .down {
+    color: $color-gray-40;
+    cursor: default;
+  }
+
+  &.max .up {
+    color: $color-gray-40;
+    cursor: default;
+  }
+}

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

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

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

@@ -0,0 +1,219 @@
+// Angular
+import {
+  Component,
+  input,
+  signal,
+  ViewChild,
+  ElementRef,
+  Optional,
+  Self,
+  OnDestroy,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+
+@Component({
+  selector: 'cai-counter',
+  templateUrl: './counter.component.html',
+  styleUrl: './counter.component.scss',
+  imports: [
+    // Components
+    SvgIconComponent,
+  ],
+})
+export class CounterComponent implements ControlValueAccessor, OnDestroy {
+  @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;
+
+  min = input<number | null>(null);
+  max = input<number | null>(null);
+
+  value = signal<number | null>(null);
+  keyPressed = signal<'up' | 'down' | null>(null);
+
+  private keyPressedTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // ControlValueAccessor callbacks
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  /**
+   * Constructor for the CounterComponent.
+   * It injects NgControl to integrate with Angular's forms API.
+   * If NgControl is present, it sets this component as the value accessor
+   * for the form control.
+   * @param ngControl - Optional NgControl instance for form integration.
+   */
+  constructor(@Optional() @Self() public ngControl: NgControl | null) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  /**
+   * Handles input changes from the input element.
+   * @param event - The input event.
+   */
+  onInput(event: Event): void {
+    const inputElement = event.target as HTMLInputElement;
+    let rawValue = inputElement.value;
+
+    // Remove any non-digit characters (including decimal points, negative signs, etc.)
+    rawValue = rawValue.replace(/[^\d]/g, '');
+
+    if (rawValue === '' || rawValue === null) {
+      this.value.set(0);
+      this.onChange(0);
+      this.updateInputValue();
+      return;
+    }
+
+    // Parse as integer to ensure whole numbers only
+    let numericValue = parseInt(rawValue, 10);
+
+    // Ensure positive values only
+    if (numericValue < 0) {
+      numericValue = 0;
+    }
+
+    // Apply min/max constraints
+    if (this.min() !== null && numericValue < this.min()!) {
+      numericValue = this.min()!;
+    }
+
+    if (this.max() !== null && numericValue > this.max()!) {
+      numericValue = this.max()!;
+    }
+
+    // Update input value to remove leading zeros and non-digits
+    inputElement.value = String(numericValue);
+
+    this.value.set(numericValue);
+    this.onChange(numericValue);
+  }
+
+  /**
+   * Handles blur event on the input element.
+   */
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  /**
+   * Increments or decrements the value.
+   * @param step - The amount to increment (positive) or decrement (negative).
+   */
+  increment(step: number): void {
+    const currentValue = this.value() ?? 0;
+    let newValue = currentValue + step;
+
+    // Apply min/max constraints
+    if (this.min() !== null && newValue < this.min()!) {
+      newValue = this.min()!;
+    }
+
+    if (this.max() !== null && newValue > this.max()!) {
+      newValue = this.max()!;
+    }
+
+    this.value.set(newValue);
+    this.onChange(newValue);
+    this.updateInputValue();
+  }
+
+  /**
+   * Updates the input element's value to match the internal value.
+   */
+  private updateInputValue(): void {
+    requestAnimationFrame(() => {
+      if (this.inputRef?.nativeElement) {
+        this.inputRef.nativeElement.value =
+          this.value() !== null ? String(this.value()) : '';
+      }
+    });
+  }
+
+  // ControlValueAccessor implementation
+
+  /**
+   * Writes a new value to the element.
+   * @param value - The new value.
+   */
+  writeValue(value: any): void {
+    const numericValue =
+      value !== null && value !== undefined ? Number(value) : null;
+    this.value.set(numericValue);
+    this.updateInputValue();
+  }
+
+  /**
+   * Registers a callback function that is called when the control's value changes.
+   * @param fn - The callback function.
+   */
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * Registers a callback function that is called when the control is touched.
+   * @param fn - The callback function.
+   */
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  focus(event: PointerEvent): void {
+    if (event.target === this.inputRef?.nativeElement) {
+      return;
+    }
+    event.preventDefault();
+    this.inputRef?.nativeElement.focus();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+        this.increment(1);
+        this.flashKeyPressed('up');
+        return;
+
+      case 'ArrowDown':
+        this.increment(-1);
+        this.flashKeyPressed('down');
+        return;
+
+      case 'Escape':
+        event.preventDefault();
+        event.stopPropagation();
+        this.inputRef?.nativeElement.blur();
+        break;
+    }
+  }
+
+  /**
+   * Applies a temporary key-pressed class effect to the specified arrow.
+   * @param direction - The arrow direction ('up' or 'down').
+   */
+  private flashKeyPressed(direction: 'up' | 'down'): void {
+    // Clear existing timeout if any
+    if (this.keyPressedTimeout !== null) {
+      clearTimeout(this.keyPressedTimeout);
+    }
+
+    this.keyPressed.set(direction);
+    this.keyPressedTimeout = setTimeout(() => {
+      this.keyPressed.set(null);
+      this.keyPressedTimeout = null;
+    }, 100);
+  }
+
+  /**
+   * Cleanup timeouts when component is destroyed.
+   */
+  ngOnDestroy(): void {
+    if (this.keyPressedTimeout !== null) {
+      clearTimeout(this.keyPressedTimeout);
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CounterComponent } from './counter.component';
+
+const meta: Meta<CounterComponent> = {
+  title: 'Components/Counter',
+  component: CounterComponent,
+  tags: ['autodocs'],
+  decorators: [],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<CounterComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="width: 120px;">
+        <cai-counter></cai-counter>
+    </div>
+    `,
+  }),
+};
+
+export const WithMinMax: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="width: 120px;">
+        <cai-counter [min]="0" [max]="100"></cai-counter>
+    </div>
+    `,
+  }),
+};
+
+export const WithFormControl: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      counterControl: new FormControl(0),
+    },
+    moduleMetadata: {
+      imports: [ReactiveFormsModule],
+    },
+    template: `
+    <div style="width: 120px;">
+        <cai-counter [formControl]="counterControl" [min]="0" [max]="100"></cai-counter>
+        <div style="margin-top: 16px; font-size: 14px;">
+          <strong>Form Value:</strong> {{ counterControl.value }}
+        </div>
+    </div>
+    `,
+  }),
+};