carriera-intern 0.0.0

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

@@ -0,0 +1,82 @@
+@let showPm = showPmPopover() === true;
+<!--  -->
+@let selectedItem = selectedPmItem(); @let isDisabled = disabled();
+<!--  -->
+@let isPmHidden = isHidden();
+
+<ng-template #pmTooltip>
+  <span class="tooltip-text">{{
+    selectedItem?.title ?? customTooltipMessage()
+  }}</span>
+</ng-template>
+<ng-template #pmPopover>
+  <div class="pm-popover">
+    @if (selectedItem) {
+      <div class="clear-container">
+        <div class="clear" (click)="onClear()">
+          <span>Clear</span>
+          <svg-icon class="icon icon-sm" name="cai-minus"></svg-icon>
+        </div>
+        <div class="divider"></div>
+      </div>
+    }
+    <div class="add" (click)="onAddItem()">
+      <span>Add new</span>
+      <svg-icon class="icon icon-sm" name="cai-plus"></svg-icon>
+    </div>
+    @for (item of items(); track item.id) {
+      <div
+        class="pm-item"
+        (click)="onSelectedItem(item)"
+        [class.selectedDesign]="selectedItem?.title === item.title"
+      >
+        <div class="icon">
+          <svg-icon
+            class="pm-item-icon"
+            [name]="item.title | remapPmIcons"
+          ></svg-icon>
+        </div>
+        <span class="pm-item-text">{{ item.title }}</span>
+        <svg-icon
+          class="icon icon-sm checkmark-icon"
+          name="cai-checkmark"
+        ></svg-icon>
+      </div>
+    }
+  </div>
+</ng-template>
+
+<div
+  class="pm-container"
+  #buttonContainer
+  [class.pm-icon-selected]="!!selectedItem"
+  [class.pm-icon-hidden]="isPmHidden"
+>
+  <button
+    type="button"
+    class="icon-container"
+    [class.pm-focus]="showPm"
+    [ngbPopover]="pmPopover"
+    triggers="click"
+    autoClose="outside inside"
+    container="body"
+    placement="bottom-left"
+    popoverClass="popover cai-dropdown pm-popover"
+    (shown)="onPmShown()"
+    (hidden)="onPmHidden()"
+    [disabled]="isDisabled"
+  >
+    <svg-icon
+      [ngbTooltip]="pmTooltip"
+      (mouseenter)="onShowTooltip(tooltip)"
+      (mouseleave)="onHideTooltip(tooltip)"
+      #tooltip="ngbTooltip"
+      [triggers]="isDisabled ? 'hover' : 'manual'"
+      tooltipClass="custom-tooltip"
+      [positionTarget]="buttonContainer"
+      placement="bottom"
+      [name]="selectedItem?.title | remapPmIcons"
+      class="pm-icon"
+    ></svg-icon>
+  </button>
+</div>

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

@@ -0,0 +1,260 @@
+@use "variables" as *;
+
+.pm-container {
+  width: 26px;
+  height: 26px;
+}
+
+.icon-container {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  padding: 4px;
+  background-color: transparent;
+  outline: none !important;
+  border: none !important;
+  transition: background-color 0.2s ease;
+
+  .pm-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #919191;
+    transition: background-color 0.2s ease;
+  }
+
+  &:hover:not(.pm-focus) {
+    background-color: #dadada;
+    color: #424242;
+  }
+}
+
+.pm-focus {
+  background-color: #424242;
+  color: #dadada;
+}
+
+.pm-icon {
+  &-hidden {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-light-gray;
+      color: $color-white-700;
+      opacity: 1;
+    }
+  }
+  &-selected {
+    .icon-container {
+      .pm-icon {
+        color: $color-blue-300;
+      }
+
+      &:hover:not(.pm-focus) {
+        background-color: $color-blue-100;
+        color: $color-blue-700;
+      }
+    }
+
+    .pm-focus {
+      background-color: $color-blue-700;
+      color: $color-blue-100;
+    }
+  }
+}
+
+.pm-popover {
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  max-height: 262px !important;
+  border-radius: 3px;
+  background-color: #2f2f2f !important;
+  overflow-y: auto;
+  user-select: none;
+
+  &::-webkit-scrollbar {
+    background-color: $color-text-base-content;
+    border-radius: 0 3px 3px 0;
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #919191;
+    width: 2px;
+    border: 2px solid $color-text-base-content;
+    border-radius: 3px;
+  }
+}
+
+.pm-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: 2px;
+  gap: 4px;
+  padding: 4px 6px 4px 6px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: $color-inverse-surface-input-neutral;
+
+    .pm-icon {
+      color: $color-icon-base-disable;
+    }
+  }
+}
+
+.checkmark-icon {
+  color: $color-inverse-icon-base-positive;
+  opacity: 0;
+}
+
+.selectedDesign {
+  .checkmark-icon {
+    opacity: 1;
+  }
+  span {
+    font-weight: 700;
+  }
+  .pm-item-icon {
+    color: $color-icon-base-positive;
+  }
+}
+
+.pm-item-text {
+  color: $color-text-base-inverse;
+  font-size: 14px;
+  font-weight: 400;
+  width: 100%;
+  line-height: 18px;
+}
+
+.pm-item-icon {
+  width: 18px;
+  height: 18px;
+  color: $color-icon-base-neutral;
+  transition: color 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 6px;
+  border-radius: 2px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+
+  span {
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #92b1f5;
+  }
+
+  svg-icon {
+    color: #92b1f5;
+  }
+
+  &:hover {
+    background-color: $color-inverse-surface-input-neutral;
+  }
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+
+  &-sm {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.clear-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.clear {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px 4px 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+
+  span {
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-transform: uppercase;
+    color: $color-icon-base-disable;
+  }
+
+  svg-icon {
+    width: 14px;
+    height: 14px;
+    color: $color-text-base-content-subtle;
+  }
+
+  &:hover {
+    background-color: $color-inverse-surface-input-neutral;
+  }
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: $color-inverse-surface-input-neutral;
+  margin-top: 4px;
+}
+
+.input-add {
+  display: flex;
+  place-items: center;
+  margin: 4px;
+  border-radius: 2px;
+}
+
+::ng-deep .custom-tooltip {
+  .tooltip-inner {
+    background-color: #424242 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 3px !important;
+    padding: 2px 6px 2px 6px !important;
+    .tooltip-text {
+      color: #ffffff !important;
+      font-weight: 600 !important;
+      font-size: 11px !important;
+    }
+  }
+
+  .tooltip-arrow {
+    display: none !important;
+  }
+}

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

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

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

@@ -0,0 +1,207 @@
+import {
+  Component,
+  input,
+  output,
+  signal,
+  effect,
+  Optional,
+  Self,
+} from '@angular/core';
+
+// Bootstrap
+import {
+  NgbPopover,
+  NgbTooltip,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Models
+import { PmItem } from '../../models/pm.model';
+
+// Modules
+import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+
+// Pipes
+import { RemapPmIconsPipe } from '../input/pipes/remap-pm-icons.pipe';
+
+@Component({
+  selector: 'cai-pm',
+  templateUrl: './pm.component.html',
+  styleUrl: './pm.component.scss',
+  imports: [
+    // Components
+    SvgIconComponent,
+
+    // Bootstrap
+    NgbPopover,
+    NgbTooltipModule,
+
+    // Modules
+    FormsModule,
+
+    // Pipes
+    RemapPmIconsPipe,
+  ],
+})
+export class PmComponent implements ControlValueAccessor {
+  /**
+   * List of PM items passed from the parent component.
+   * Used to render all available PM options.
+   */
+  items = input<PmItem[]>([]);
+
+  /**
+   * Event emitted when the "Add new" button is clicked.
+   * The parent component can listen to this and perform appropriate actions.
+   */
+  onAdd = output<void>();
+
+  onSelectionChange = output<PmItem | null>();
+
+  /**
+   * The currently selected PM item.
+   * Used to track and display the selected item's title and logo.
+   */
+  selectedPmItem = signal<PmItem | null>(null);
+
+  /**
+   * Disabled state for forms integration. Strongly depends on isHidden flag.
+   */
+  disabled = signal<boolean>(true);
+
+    /**
+   * Custom tooltip message for PM items.
+   */
+  customTooltipMessage = input<string>("PM");
+
+      /**
+   * Custom flag for showing/hiding the PM component.
+   */
+  isHidden = input<boolean>(true);
+
+  /**
+   * Holder for incoming value from writeValue to resolve against items.
+   */
+  private _incomingValue: PmItem | number | string | null | undefined =
+    undefined;
+
+  // ControlValueAccessor callbacks
+  onChange: (value: number | null) => void = () => {};
+  onTouched: () => void = () => {};
+
+  constructor(@Optional() @Self() public ngControl: NgControl | null) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+
+    // Resolve incoming value when items or value change
+    effect(() => {
+      const list = this.items();
+      const incoming = this._incomingValue;
+      if (incoming === undefined) return;
+
+      if (incoming === null) {
+        this.selectedPmItem.set(null);
+        return;
+      }
+
+      const resolved = list?.find((i) => i.id === incoming) ?? null;
+      this.selectedPmItem.set(resolved);
+    });
+
+    // Update disabled state based on isHidden and reset selection when hidden
+    effect(() => {
+      const hidden = this.isHidden();
+      this.disabled.set(hidden);
+      
+      // Reset selected item when component becomes hidden
+      if (hidden) {
+        this.onClear();
+      }
+    });
+  }
+
+  /**
+   * Boolean signal indicating whether the PM popover is currently visible.
+   * Used to apply conditional styling or behavior when the popover is shown or hidden.
+   */
+  showPmPopover = signal<boolean>(false);
+
+  /**
+   * Called when the "Add new" button is clicked.
+   * Emits the `onAdd` event to notify the parent component.
+   */
+  onAddItem(): void {
+    this.onAdd.emit();
+  }
+
+  /**
+   * Opens the tooltip when hovering over a PM item.
+   */
+  onShowTooltip(tooltip: NgbTooltip) {
+    tooltip.open();
+  }
+
+  /**
+   * Closes the tooltip when the mouse leaves a PM item.
+   */
+  onHideTooltip(tooltip: NgbTooltip) {
+    tooltip.close();
+  }
+
+  /**
+   * Called when the PM popover becomes visible.
+   */
+  onPmShown() {
+    this.showPmPopover.set(true);
+  }
+
+  /**
+   * Called when the PM popover is hidden.
+   */
+  onPmHidden() {
+    this.showPmPopover.set(false);
+  }
+
+  /**
+   * Called when a PM item is clicked.
+   * Sets the `selectedPmItem` with the clicked item's data.
+   */
+  onSelectedItem(item: PmItem) {
+    this.selectedPmItem.set(item);
+    this.onSelectionChange.emit(item);
+    this.onChange(item.id ?? null);
+    this.onTouched();
+  }
+
+  /**
+   * Clears the selected PM item.
+   * Resets id, title and logoName.
+   */
+  onClear() {
+    this.selectedPmItem.set(null);
+    this.onSelectionChange.emit(null);
+    this.onChange(null);
+    this.onTouched();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: number | string | null): void {
+    this._incomingValue = value;
+  }
+
+  registerOnChange(fn: (value: number | null) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+}

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

@@ -0,0 +1,104 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { PmComponent } from './pm.component';
+
+import data from './mock/repair-pm.json';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+const meta: Meta<PmComponent> = {
+  title: 'Components/PmComponent',
+  component: PmComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+    },
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<PmComponent>;
+
+// --- Stories ---
+
+export const PM: Story = {
+  args: {
+    items: data.pmTrucks,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <cai-pm [items]="items"></cai-pm>
+    `,
+  }),
+};
+
+export const InForm: Story = {
+  args: {
+    items: data.pmTrucks,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        pm: new FormControl({ value: null, disabled: false }),
+      }),
+    },
+    template: `
+        <form [formGroup]="form">
+          <cai-pm [items]="items" formControlName="pm" [isHidden]="false"></cai-pm>
+        </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+
+    `,
+  }),
+};
+
+export const Preselected: Story = {
+  args: {
+    items: data.pmTrucks,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        pm: new FormControl({ value: 928, disabled: false }),
+      }),
+    },
+    template: `
+        <form [formGroup]="form">
+          <cai-pm [items]="items" formControlName="pm"></cai-pm>
+        </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    items: data.pmTrucks,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        pm: new FormControl({ value: null, disabled: true }),
+      }),
+    },
+    template: `
+        <form [formGroup]="form">
+          <cai-pm [items]="items" formControlName="pm"></cai-pm>
+        </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/rating_review/enums/filter-type.enum.ts

@@ -0,0 +1,7 @@
+export enum FilterType{
+    LIKES = "likes",
+    DISLIKES = "dislikes",
+    REVIEWS = "reviews",
+    ALL = "all",
+    RATING = "rating"
+}

package/projects/carriera-intern-components/src/app/components/rating_review/enums/review-type.enum.ts

@@ -0,0 +1,5 @@
+export enum ReviewType{
+    Modal = "Modal",
+    Table = "Table",
+    Details = "Details"
+}

package/projects/carriera-intern-components/src/app/components/rating_review/pipes/date-formating.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DateFormatingPipe } from './date-formating.pipe';
+
+describe('DateFormatingPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DateFormatingPipe();
+    expect(pipe).toBeTruthy();
+  });
+});