carriera-intern 0.0.0 → 1.1.76

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

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

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

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

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

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

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

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

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