carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/rating_review/single-review/single-review.component.ts

@@ -1,159 +0,0 @@
-import { IReview } from './../../../models/review.model';
-import {
-  Component,
-  computed,
-  EventEmitter,
-  Input,
-  input,
-  Output,
-  signal,
-} from '@angular/core';
-import { SvgIconComponent } from 'angular-svg-icon';
-import { AvatarComponent } from '../../avatar/avatar.component';
-import {
-  NgbModule,
-  NgbTooltip,
-  NgbTooltipModule,
-} from '@ng-bootstrap/ng-bootstrap';
-import { ReviewType } from '../enums/review-type.enum';
-import { DateFormatingPipe } from '../pipes/date-formating.pipe';
-
-@Component({
-  selector: 'cai-single-review',
-  imports: [
-    SvgIconComponent,
-    AvatarComponent,
-    NgbModule,
-    NgbTooltipModule,
-  ],
-  providers: [DateFormatingPipe],
-  templateUrl: './single-review.component.html',
-  styleUrl: './single-review.component.scss',
-})
-export class SingleReviewComponent {
-  constructor(private dateFormating: DateFormatingPipe) {}
-
-  //enum
-  public ReviewType = ReviewType;
-
-  //signals
-  newTime = signal<string>('');
-  currentContent = signal<string>('');
-  expanded = signal<boolean>(false);
-  canExpand = signal<boolean>(true);
-  editing = signal<boolean>(false);
-  edited = signal<boolean>(false);
-  confirmed: boolean = true;
-  canceled: boolean = false;
-
-  //inputs
-  @Input({ required: true }) type!: string;
-  @Input({ required: true }) singleReview!: IReview;
-
-  //outputs
-  @Output() deleteReview = new EventEmitter<number>();
-  @Output() onAddedReview = new EventEmitter<{
-    review: IReview;
-  }>();
-
-  @Output() onEditedReview = new EventEmitter<{
-    review: IReview;
-    edited: boolean;
-  }>();
-
-  ngOnInit(): void {
-    this.currentContent.set(this.singleReview.comment);
-    if (this.singleReview.createdAt && this.singleReview.updatedAt === '') {
-      const formatted = this.dateFormating.transform(
-        this.singleReview.createdAt
-      );
-
-      this.newTime.set(formatted || '');
-    }
-    if (this.singleReview.updatedAt) {
-      const formatted = this.dateFormating.transform(
-        this.singleReview.updatedAt
-      );
-      this.newTime.set(formatted || '');
-    }
-    if (this.singleReview.isItCurrentCompanyUser) {
-      if (!this.singleReview.comment && !this.singleReview.thumb) {
-        this.editing.set(true);
-      }
-    }
-    if (this.singleReview.comment.length > 50) {
-      this.canExpand.set(true);
-    } else {
-      this.canExpand.set(false);
-    }
-  }
-
-  onRate(prop: string): void {
-    this.singleReview.thumb = prop;
-  }
-
-  onEdit(): void {
-    this.editing.set(true);
-    this.edited.set(true);
-    this.singleReview.isEdited = true;
-  }
-
-  onSaveChanges(): void {
-    if (!this.singleReview.thumb && !this.singleReview.comment) return;
-    if (this.edited()) this.singleReview.isEdited = true;
-
-    const currentTime: Date = new Date();
-    const formattedTime = this.dateFormating.transform(currentTime);
-    this.newTime.set(formattedTime);
-
-    if (this.singleReview.isEdited) {
-      this.onEditedReview.emit({
-        review: this.singleReview,
-        edited: this.edited(),
-      });
-    } else {
-      this.onAddedReview.emit({
-        review: this.singleReview,
-      });
-    }
-    this.editing.set(false);
-  }
-
-  onChangeContent(event: Event): void {
-    event.preventDefault();
-    const divElement = event.target as HTMLDivElement;
-    const newValue = divElement.textContent || '';
-    this.singleReview.comment = newValue;
-  }
-
-  onDelete(): void {
-    this.deleteReview.emit(this.singleReview.reviewId);
-  }
-
-  onExpandToggle(): void {
-    this.expanded.set(!this.expanded());
-  }
-
-  renderedContent = computed(() => {
-    const value = this.singleReview.comment?.trim() || '';
-    if (this.editing()) return value;
-    if (this.expanded()) return value;
-    return value.length > 50 ? value.substring(0, 50) + '...' : value;
-  });
-
-  onCancelReview(): void {
-    this.deleteReview.emit();
-  }
-
-  limitLength(event: KeyboardEvent) {
-    const target = event.target as HTMLElement;
-    const text = target.innerText || '';
-
-    if (
-      text.length > 140 &&
-      event.key !== 'Backspace' &&
-      event.key !== 'Delete'
-    )
-      event.preventDefault();
-  }
-}

package/projects/carriera-intern-components/src/app/components/selected-location-field/interfaces/index.ts

@@ -1 +0,0 @@
-export * from './selected-business-field.interface';

package/projects/carriera-intern-components/src/app/components/selected-location-field/interfaces/selected-business-field.interface.ts

@@ -1,11 +0,0 @@
-export interface SelectedBusinessField {
-  label?: string;
-  id?: number;
-  name?: string;
-  address?: string;
-  phone?: string;
-  email?: string;
-  isFavorite?: boolean;
-  isRequired?: boolean;
-  isDisabled?: boolean;
-}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.html

@@ -1,100 +0,0 @@
-@let isDisabled = business().isDisabled; @let email = business().email;
-@let phone = business().phone; @let address = business().address;
-@let name = business().name; @let isFavorite = business().isFavorite;
-@let isRequired = business().isRequired; @let label = business().label;
-
-<div class="container" [class.disabled]="isDisabled">
-  <p class="label" [class.required]="isRequired">
-    {{ label }}
-  </p>
-  <div class="title-row">
-    <div class="d-flex align-items-center gap-1">
-      <p class="title">{{ name }}</p>
-
-      @if (isFavorite) {
-        <svg-icon [name]="'cai-favorite'" class="icon"></svg-icon>
-      }
-    </div>
-
-    @if (!isDisabled) {
-      <div class="d-flex align-items-center gap-1">
-        <button
-          (click)="handleAction(eGeneralActions.EDIT)"
-          [disabled]="isDisabled"
-          ngbTooltip="Edit"
-          [openDelay]="600"
-          tooltipClass="tooltip input-tooltip"
-          [placement]="'top'"
-          [container]="'body'"
-          [autoClose]="true"
-          [class]="'action-button'"
-        >
-          <svg-icon [name]="'cai-edit'" class="bg-icon"></svg-icon>
-        </button>
-        <button
-          (click)="handleAction(eGeneralActions.CLEAR)"
-          [disabled]="isDisabled"
-          ngbTooltip="Cancel"
-          [openDelay]="600"
-          tooltipClass="tooltip input-tooltip"
-          [placement]="'top'"
-          [container]="'body'"
-          [autoClose]="true"
-          [class]="'action-button'"
-        >
-          <svg-icon [name]="'cai-cancel'" class="bg-icon"></svg-icon>
-        </button>
-      </div>
-    }
-  </div>
-  @if (phone || email || address) {
-    <div class="details-row">
-      @let isDisabledColor = isDisabled ? null : "blue";
-      @if (phone) {
-        <div class="detail-container">
-          <cai-copy
-            [alignment]="eAlignment.LEFT"
-            [value]="phone"
-            [copyArea]="'full'"
-            [icon]="'cai-phone'"
-            [iconSize]="14"
-            [iconColor]="isDisabledColor"
-            [tooltipClass]="'tooltip-m-t-4'"
-          >
-            <p class="detail">{{ phone }}</p>
-          </cai-copy>
-        </div>
-      }
-      @if (email) {
-        <div class="detail-container">
-          <cai-copy
-            [alignment]="eAlignment.LEFT"
-            [value]="email"
-            [copyArea]="'full'"
-            [icon]="'cai-email'"
-            [iconSize]="14"
-            [iconColor]="isDisabledColor"
-            [tooltipClass]="'tooltip-m-t-4'"
-          >
-            <p class="detail">{{ email }}</p>
-          </cai-copy>
-        </div>
-      }
-      @if (address) {
-        <div class="detail-container">
-          <cai-copy
-            [alignment]="eAlignment.LEFT"
-            [value]="address"
-            [copyArea]="'full'"
-            [icon]="'cai-address'"
-            [iconSize]="14"
-            [iconColor]="isDisabledColor"
-            [tooltipClass]="'tooltip-m-t-4'"
-          >
-            <p class="detail">{{ address }}</p>
-          </cai-copy>
-        </div>
-      }
-    </div>
-  }
-</div>

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.scss

@@ -1,239 +0,0 @@
-@use "variables" as *;
-*,
-*::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;
-}
-
-/* Remove default list styles on ul, ol */
-ul,
-ol {
-  padding-left: 1.5rem;
-  list-style-position: outside;
-}
-
-/* Link styles */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/* Tables */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* Remove outline for focus on mouse users, but keep it for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.label {
-  color: $color-black-300;
-  user-select: none;
-  pointer-events: none;
-
-  font-family: Montserrat;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 600;
-
-  &.required::after {
-    content: "* ";
-    color: $color-red-500;
-  }
-
-  position: absolute;
-  top: -16px;
-  left: 6px;
-}
-
-.container {
-  position: relative;
-  width: 100%;
-  padding: 4px 4px 6px 6px;
-  margin: 0;
-  border-radius: 2px;
-
-  background-color: $color-blue-50;
-
-  transition: background-color 0.2s ease-in-out;
-
-  &:hover:not(.disabled) {
-    background-color: $color-blue-100;
-
-    .bg-icon {
-      opacity: 1;
-      color: $color-blue-100;
-    }
-  }
-
-  &:has(.action-button:focus-visible) {
-    .bg-icon {
-      opacity: 1 !important;
-    }
-  }
-
-  &.disabled {
-    background-color: $color-white-100;
-    .icon {
-      color: $color-black-100;
-    }
-  }
-
-  .title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .details-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 22px;
-    margin-top: 6px;
-  }
-}
-
-.title {
-  color: $color-black-300;
-  font-family: Montserrat;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 18px;
-  text-transform: uppercase;
-}
-
-.detail {
-  color: $color-black-500;
-  font-family: Montserrat;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 14px;
-
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  min-width: 0;
-
-  user-select: none;
-}
-
-.icon {
-  height: 14px;
-  width: 14px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: $color-blue-300;
-}
-
-.detail-container {
-  min-width: 0;
-  flex: 1;
-  max-width: max-content;
-}
-
-.bg-icon {
-  opacity: 0;
-  background-color: $color-blue-300;
-  color: $color-blue-50;
-  border-radius: 1px;
-  height: 18px;
-  width: 18px;
-  padding: 0;
-  display: grid;
-  place-items: center;
-
-  transition:
-    background-color 0.1s ease-in-out,
-    color 0.1s ease-in-out,
-    opacity 0.1s ease-in-out,
-    transform 0.1s ease-in-out;
-
-  transform-box: border-box;
-  transform-origin: center;
-  will-change: transform;
-
-  svg {
-    transition: transform 0.1s ease-in-out;
-  }
-
-  &:hover {
-    background-color: $color-blue-700;
-    transform: scale(calc(22 / 18));
-    svg {
-      transform: scale(calc(18 / 22));
-    }
-  }
-
-  &:active {
-    transform: scale(1);
-  }
-
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.action-button {
-  transition: outline 0.1s ease-in-out;
-
-  outline: 2px solid transparent;
-
-  border-radius: 1px;
-
-  &:focus-visible {
-    outline: 2px solid $color-black-300 !important;
-  }
-}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.component.ts

@@ -1,28 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-
-// Interfaces
-import { SelectedBusinessField } from './interfaces';
-
-// Components
-import { CopyComponent } from '../copy/copy.component';
-import { eAlignment, eGeneralActions } from '../../enums';
-import { SvgIconComponent } from 'angular-svg-icon';
-
-@Component({
-  selector: 'cai-selected-business-field',
-  templateUrl: './selected-business-field.component.html',
-  styleUrl: './selected-business-field.component.scss',
-  imports: [NgbTooltip, CopyComponent, SvgIconComponent],
-})
-export class SelectedBusinessFieldComponent {
-  business = input<SelectedBusinessField>({});
-  onAction = output<eGeneralActions>();
-
-  public eGeneralActions = eGeneralActions;
-  public eAlignment = eAlignment;
-
-  public handleAction(action: eGeneralActions) {
-    this.onAction.emit(action);
-  }
-}

package/projects/carriera-intern-components/src/app/components/selected-location-field/selected-business-field.stories.ts

@@ -1,132 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { SelectedBusinessFieldComponent } from './selected-business-field.component';
-import { eGeneralActions } from '../../enums';
-const meta: Meta<SelectedBusinessFieldComponent> = {
-  title: 'Components/SelectedBusinessField',
-  component: SelectedBusinessFieldComponent,
-  tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [SelectedBusinessFieldComponent],
-    }),
-  ],
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<SelectedBusinessFieldComponent>;
-
-// --- Stories ---
-
-export const FuelStop: Story = {
-  args: {
-    business: {
-      label: 'Fuel Stop',
-      id: 2,
-      name: 'Hello, world!',
-      address: '123 Main St',
-      phone: '123-456-7890',
-      isFavorite: true,
-      isRequired: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      onAction: ($event: eGeneralActions) => {
-        console.log('action', $event);
-      },
-    },
-    template: `
-    <div style="width: 456px;">
-      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
-      </cai-selected-business-field>
-    </div>
-    `,
-  }),
-};
-
-export const RepairShop: Story = {
-  args: {
-    business: {
-      label: 'Repair Shop',
-      id: 1,
-      name: 'Hello, world!',
-      address: '123 Main St',
-      phone: '123-456-7890',
-      email: 'hello@world.com',
-      isFavorite: false,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      onAction: ($event: eGeneralActions) => {
-        console.log('action', $event);
-      },
-    },
-    template: `
-    <div style="width: 456px;">
-      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
-      </cai-selected-business-field>
-    </div>
-    `,
-  }),
-};
-
-export const FuelStopDisabled: Story = {
-  args: {
-    business: {
-      label: 'Fuel Stop',
-      id: 3,
-      name: 'Hello, world!',
-      address:
-        '123 Main Long Street, Suite 400, Springfield, IL 62704, United States',
-      phone: '123-456-7890',
-      isFavorite: true,
-      isRequired: true,
-      isDisabled: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      onAction: ($event: eGeneralActions) => {
-        console.log('action', $event);
-      },
-    },
-    template: `
-    <div style="width: 456px;">
-      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
-      </cai-selected-business-field>
-    </div>
-    `,
-  }),
-};
-
-export const Empty: Story = {
-  args: {
-    business: {
-      label: 'Fuel Stop',
-      id: 2,
-      name: 'Hello, world!',
-
-      isFavorite: true,
-      isRequired: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      onAction: ($event: eGeneralActions) => {
-        console.log('action', $event);
-      },
-    },
-    template: `
-    <div style="width: 456px;">
-      <cai-selected-business-field [business]="business" (onAction)="onAction($event)">
-      </cai-selected-business-field>
-    </div>
-    `,
-  }),
-};