carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/avatar/models/avatar.model.ts

@@ -0,0 +1,52 @@
+export interface Driver {
+  id: number;
+  firstName?: string | null;
+  lastName?: string | null;
+  fullName?: string | null;
+  owner?: boolean | null;
+  // From driver object
+  avatarFile?: AvatarFile | null;
+  colorFlag?: ColorFlag | null;
+  // Direct access
+  avatarUrl?: string | null;
+  avatarColor?: AvatarColor | null;
+  [key: string]: any;
+}
+
+export type AvatarFile = {
+  fileId: number;
+  fileName: string;
+  url: string;
+  fileSize: number;
+  [key: string]: any;
+};
+
+export type ColorFlag = {
+  id: number;
+  name: AvatarColor;
+};
+
+const colors = [
+  'Blue',
+  'Green',
+  'Red',
+  'Yellow',
+  'Purple',
+  'Gold',
+  'Light Green',
+  'Orange',
+  'Light Blue',
+  'Pink',
+  'Brown',
+  'Gray',
+  'Lime',
+  'Navy',
+  'Azure',
+  'Magenta',
+] as const;
+
+export type AvatarColor = (typeof colors)[number];
+
+const sizes = [18, 22, 32, 74, 160, 28] as const;
+
+export type Size = (typeof sizes)[number];

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

@@ -0,0 +1 @@
+export * from './avatar.model';

package/projects/carriera-intern-components/src/app/components/avatar/pipes/avatar-classes.pipe.ts

@@ -0,0 +1,98 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Size } from '../models';
+
+interface AvatarClassesInput {
+  size: Size;
+  color?: string | null;
+  isOwner?: boolean | null;
+  inverse: boolean;
+  rounded: boolean;
+  customHoverSize?: number;
+  hover: boolean;
+}
+
+@Pipe({
+  name: 'avatarClasses',
+})
+export class AvatarClassesPipe implements PipeTransform {
+  private readonly colorMap: Record<string, string> = {
+    Blue: 'blue',
+    Green: 'green',
+    Red: 'red',
+    Yellow: 'yellow',
+    Purple: 'purple',
+    Gold: 'gold',
+    'Light Green': 'light-green',
+    Orange: 'orange',
+    'Light Blue': 'light-blue',
+    Pink: 'pink',
+    Brown: 'brown',
+    Gray: 'gray',
+    Lime: 'lime',
+    Navy: 'navy',
+    Azure: 'azure',
+    Magenta: 'magenta',
+  };
+
+  private readonly sizeMap: Record<Size, string> = {
+    18: 'xs',
+    22: 'sm',
+    28: 'mod',
+    32: 'md',
+    74: 'lg',
+    160: 'xl',
+  };
+
+  transform({
+    size,
+    color,
+    isOwner,
+    inverse,
+    rounded,
+    customHoverSize,
+    hover,
+  }: AvatarClassesInput): string {
+    const classes: string[] = [];
+
+    // Add owner class
+    if (isOwner) {
+      classes.push('is-owner');
+    }
+
+    // Add inverse class
+    if (inverse) {
+      classes.push('inverse');
+    }
+
+    // Add rounded class
+    if (rounded) {
+      classes.push('rounded');
+    }
+
+    // Add custom hover size class
+    if (customHoverSize) {
+      classes.push('has-custom-hover-size');
+    }
+
+    // Add size class
+    const sizeClass = this.sizeMap[size];
+    if (sizeClass) {
+      classes.push(sizeClass);
+    }
+
+    // Add color class
+    if (color) {
+      const colorClass = this.colorMap[color];
+      if (colorClass) {
+        classes.push(colorClass);
+      }
+    }
+
+    // Add hover class
+    if (hover) {
+      classes.push('hover');
+    }
+
+    return classes.join(' ');
+  }
+}

package/projects/carriera-intern-components/src/app/components/avatar/pipes/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar-classes.pipe';
+export * from './initials.pipe';

package/projects/carriera-intern-components/src/app/components/avatar/pipes/initials.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'initials',
+})
+export class InitialsPipe implements PipeTransform {
+  transform({
+    firstName,
+    lastName,
+    fullName,
+  }: {
+    firstName?: string | null;
+    lastName?: string | null;
+    fullName?: string | null;
+  }): string {
+    let initials = '';
+    if (fullName) {
+      initials =
+        fullName.split(' ')[0].charAt(0).toUpperCase() +
+        fullName.split(' ')[1].charAt(0).toUpperCase();
+    } else {
+      if (firstName) {
+        initials += firstName.charAt(0).toUpperCase();
+      }
+      if (lastName) {
+        initials += lastName.charAt(0).toUpperCase();
+      }
+    }
+    return initials;
+  }
+}

package/projects/carriera-intern-components/src/app/components/content-driven-co/content-driven-co.component.html

@@ -0,0 +1,10 @@
+<div class="custom-form-field">
+  <ng-content select="cai-input"></ng-content>
+  @for(item of list; track item.name){
+  <div>
+    <ng-container
+      *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"
+    ></ng-container>
+  </div>
+  }
+</div>

package/projects/carriera-intern-components/src/app/components/content-driven-co/content-driven-co.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/content-driven-co/content-driven-co.component.ts

@@ -0,0 +1,25 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, ContentChild, contentChild, Directive, Input, input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'my-label-custom-text',
+  standalone: false,
+})
+export class MyLabelCustomTextDirective {
+  // If you want to pass an id or value later
+  text = input<string>();
+}
+
+@Component({
+  selector: 'cai-content-driven-co',
+  imports: [NgTemplateOutlet],
+  templateUrl: './content-driven-co.component.html',
+  styleUrl: './content-driven-co.component.css',
+})
+export class ContentDrivenCoComponent {
+  @Input() list: any[] = [];
+  @Input() config: any = {};
+  labelDirective = contentChild(MyLabelCustomTextDirective);
+  @ContentChild(TemplateRef)
+  itemTemplate!: TemplateRef<any>;
+}

package/projects/carriera-intern-components/src/app/components/content-driven-co/content-driven-co.stories.ts

@@ -0,0 +1,65 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import {
+  ContentDrivenCoComponent,
+  MyLabelCustomTextDirective,
+} from './content-driven-co.component';
+import { InputComponent } from '../input/input.component';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+const meta: Meta<ContentDrivenCoComponent> = {
+  title: 'Components/ContentDrivenCo',
+  component: ContentDrivenCoComponent,
+  tags: ['autodocs'],
+  decorators: [
+     moduleMetadata({
+          imports: [ReactiveFormsModule],
+        }),
+  ],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<ContentDrivenCoComponent>;
+
+export const Main: Story = {
+  args: {
+    list: [
+      {
+        name: 'test',
+      },
+      {
+        name: 'test',
+      },
+    ],
+    config: {
+      type: 'text',
+      name: 'Input with icon',
+      icon: 'cai-email',
+      label: 'email',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: string }) => {},
+      form: new FormGroup({
+        input: new FormControl({ value: '', disabled: false }, [
+          Validators.required,
+        ]),
+      }),
+    },
+    moduleMetadata: {
+      imports: [InputComponent],
+      declarations: [MyLabelCustomTextDirective],
+    },
+    template: `
+        <form [formGroup]="form" style="width: 280px;">
+            <cai-content-driven-co [list]="list">
+                    <cai-input [id]="'default-input'" [config]="config" formControlName="input"></cai-input>
+                    <ng-template let-item>
+                        <my-label-custom-text>{{ item.name }}</my-label-custom-text>
+                    </ng-template>
+            </cai-content-driven-co>
+        </form>`,
+  }),
+};

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

@@ -0,0 +1,66 @@
+@let isCopied = !!copied();
+<div
+  class="copy-container d-flex align-items-center gap-1"
+  [class]="{
+    'copy-area-full': copyArea() === 'full',
+    'has-custom-icon': !!icon(),
+    inverse: inverse(),
+  }"
+  (mouseleave)="resetCopied()"
+  (click)="copyArea() === 'full' && onCopy($event)"
+  [ngbTooltip]="copyArea() === 'full' ? tooltipTemplate : null"
+  [placement]="tooltipPlacement()"
+  [container]="'body'"
+  [tooltipClass]="
+    (isCopied
+      ? 'tooltip-bg-blue-500 '
+      : inverse()
+        ? 'tooltip-bg-white-700 tooltip-text-black-500'
+        : ' ') +
+    ' ' +
+    tooltipClass()
+  "
+>
+  <div
+    class="copy-content"
+    [class]="{
+      'order-1': alignment() === eAlignment.LEFT,
+      'order-0': alignment() === eAlignment.RIGHT,
+    }"
+  >
+    <ng-content></ng-content>
+  </div>
+  @if (!hasNoIcon()) {
+    <div
+      (click)="onCopy($event)"
+      [ngbTooltip]="copyArea() === 'icon' ? tooltipTemplate : null"
+      [container]="'body'"
+      [tooltipClass]="
+        isCopied
+          ? 'input-tooltip tooltip-bg-blue-500'
+          : inverse()
+            ? 'input-tooltip tooltip-bg-white-700 tooltip-text-black-500'
+            : 'input-tooltip'
+      "
+      [placement]="tooltipPlacement()"
+      [class]="'copy-icon-container ' + iconColor()"
+      [class.active]="isCopied"
+      [style.--icon-size]="iconSize() + 'px'"
+    >
+      <svg-icon
+        [name]="icon() || ''"
+        [class]="'icon transition custom-icon'"
+      ></svg-icon>
+      <svg-icon
+        [name]="'cai-copy'"
+        [class]="'icon transition copy-icon'"
+      ></svg-icon>
+    </div>
+  }
+</div>
+
+@let copyText =
+  isCopied ? eGeneralActions.COPIED : (copyTooltip() ?? eGeneralActions.COPY);
+<ng-template #tooltipTemplate>
+  {{ copyText }}
+</ng-template>

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

@@ -0,0 +1,103 @@
+@use "variables" as *;
+
+.copy-container {
+  .copy-content {
+    max-width: calc(100% - 16px);
+  }
+
+  .copy-icon-container {
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    position: relative;
+    width: (var(--icon-size));
+    height: (var(--icon-size));
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      width: (var(--icon-size));
+      height: (var(--icon-size));
+
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &:hover,
+  &.has-custom-icon {
+    .copy-icon-container {
+      opacity: 1;
+    }
+  }
+
+  &.has-custom-icon {
+    .custom-icon {
+      opacity: 1;
+    }
+
+    .copy-icon {
+      opacity: 0;
+    }
+
+    &:hover {
+      .copy-icon {
+        opacity: 1;
+      }
+
+      .custom-icon {
+        opacity: 0;
+      }
+    }
+  }
+
+  &.copy-area-full {
+    cursor: pointer;
+
+    &:hover {
+      .copy-icon-container {
+        color: $color-black-300;
+
+        &.blue {
+          color: $color-blue-700;
+        }
+      }
+    }
+  }
+
+  .copy-icon-container {
+    color: $color-black-100;
+
+    &:hover {
+      color: $color-black-300;
+
+      &.blue {
+        color: $color-blue-700;
+      }
+    }
+
+    &.blue {
+      color: $color-blue-300;
+    }
+
+    &.active {
+      color: $color-blue-700 !important;
+    }
+  }
+
+  &.inverse {
+    .copy-icon-container {
+      color: $color-black-100;
+
+      &:hover {
+        color: $color-white-500;
+      }
+
+      &.active {
+        color: $color-blue-100 !important;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, signal, ViewChild } from '@angular/core';
+
+// Enums
+import { eAlignment } from '../../enums';
+import { eGeneralActions } from '../../enums/general-actions.enum';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'cai-copy',
+  templateUrl: './copy.component.html',
+  styleUrl: './copy.component.scss',
+  imports: [
+    CommonModule,
+    NgbTooltip,
+
+    // Components
+    SvgIconComponent,
+  ],
+})
+export class CopyComponent {
+  public value = input<string>();
+  public alignment = input<eAlignment>(eAlignment.RIGHT);
+  public copyTooltip = input<string>();
+  public copyArea = input<'icon' | 'full'>('icon');
+  public icon = input<string | null>(null);
+  public iconSize = input<number>(12);
+  public iconColor = input<string | null>(null);
+  public tooltipClass = input<string | null>(null);
+  public tooltipPlacement = input<'top' | 'bottom'>('bottom');
+  public inverse = input<boolean>(false);
+  public hasNoIcon = input<boolean>(false);
+
+  public copied = signal<boolean>(false);
+
+  // Enums
+  public eGeneralActions = eGeneralActions;
+  public eAlignment = eAlignment;
+
+  constructor(private clipboard: Clipboard) {}
+
+  public onCopy(event: MouseEvent) {
+    event.stopPropagation();
+    this.clipboard.copy(this.value() ?? '');
+    this.copied.set(true);
+  }
+
+  public resetCopied() {
+    setTimeout(() => {
+      this.copied.set(false);
+    }, 200);
+  }
+}