@flower-city-online/itinerary-lib 0.0.32 → 0.0.34

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.html

@@ -1,115 +0,0 @@
-<lib-base-card *ngIf="processedCardData" class="card-component px-4 py-4 my-2 rounded-lg outset-downshadow">
-  <div class="flex items-start justify-between mb-2">
-    <div class="flex gap-5 items-start">
-      <div [class]="
-          !isDraft
-            ? ' text-primary'
-            : '' +
-              ' items-center sm:text-[10px] xs:text-[9px] flex flex-col gap-y-[0px]'
-        ">
-        <img [src]="!isDraft ? ICONS['upvote'] : ICONS['upArrowWhite']" alt="" />
-        <span [class]="!isDraft ? 'text-primary' : 'drah-voter-header'">
-          {{ parseStringToNumber(processedCardData.upVotes) | votes }}
-        </span>
-        <img [src]="ICONS['downvote']" alt="" />
-      </div>
-      <div (click)="handleTitleClick()" class="">
-        <h4 class="title medium-14 p-0 m-0">
-          {{ processedCardData.title }}
-        </h4>
-        <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
-          <img [src]="ICONS['user']" alt="" />
-          <span>{{ processedCardData.userName }} -
-            {{ processedCardData.timeAgo }}</span>
-        </h5>
-      </div>
-    </div>
-    <ng-container *ngIf="displayPublishStatus">
-      <div class="draft-header lg:ml-[36px]" *ngIf="processedCardData.isDraft">
-        {{ "DRAFT_SAVED" | translate }}
-      </div>
-      <div class="draft-header lg:ml-[36px]" *ngIf="!processedCardData.isDraft">
-        Published
-      </div>
-    </ng-container>
-
-    <div class="flex items-center">
-      <lib-menu-btn
-        (select)="handleMenueItemSelect()"
-        (click)="handleMenuClick()"
-        (change)="handleMenuItemChange()"
-        id="lib-menu-btn"
-        class="lib-menu-custom-class lib-menu-bg-none"
-        [disableTextShadow]="true"
-        [menuItems]="libMenuItem"
-      >
-        <img [src]="ICONS['horizontal']" alt="" />
-      </lib-menu-btn>
-    </div>
-  </div>
-  <hr class="h-1 text-secondary opacity-25" />
-  <div class="my-2 flex items-start gap-x-5">
-    <div
-      (click)="handleImageClick()"
-      class="1 mb-0 flex flex-col items-center justify-center w-[80px]"
-    >
-      <img
-        class="card-image"
-        [src]="processedCardData.imageSrc"
-        alt=""
-        width="100"
-      />
-    </div>
-    <div class="2 flex-1">
-      <div *ngIf="!cardData?.isDraft" class="font-normal text-secondary flex items-center gap-x-4 text-sm">
-        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
-          <li *ngFor="let location of cardDataForLocations.locationColumn1"
-            class="location-item flex items-center gap-1">
-            <img [src]="location.icon" alt="" />
-            <span class="truncate sm:max-w-10 xs:max-w-11">{{
-              location.name
-              }}</span>
-          </li>
-        </ul>
-        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
-          <li *ngFor="let location of cardDataForLocations.locationColumn2"
-            class="location-item flex items-center gap-1">
-            <img [src]="location.icon" alt="" />
-            <span class="truncate sm:max-w-10 xs:max-w-11">{{
-              location.name
-              }}</span>
-          </li>
-        </ul>
-      </div>
-      <p *ngIf="processedCardData.isDraft" class="text-xs draft-description">
-        {{ "FINISH_ITINERARY_CREATION" | translate }}
-      </p>
-    </div>
-  </div>
-  <hr class="h-1 text-secondary opacity-25" />
-  <div class="my-2 flex items-center justify-between">
-    <div
-      class="flex items-center justify-between sm:gap-x-7 xs:gap-x-5 sm:text-sm xs:text-[9px] text-secondary"
-    >
-      <div (click)="handleEyeClicked()" class="flex items-center gap-x-[6px]">
-        <img class="bottom-icons" [src]="ICONS['eye']" alt="" />
-        <span class="bottom-tags">{{ processedCardData.views }}</span>
-      </div>
-      <div (click)="handleMessageClicked()" class="flex items-center gap-x-[6px]">
-        <img class="bottom-icons" [src]="ICONS['comment2']" alt="" />
-        <span class="bottom-tags">{{ processedCardData.comments }}</span>
-      </div>
-      <div (click)="handleForkClick()" class="flex items-center gap-x-[6px]">
-        <img class="bottom-icons" [src]="ICONS['fork']" alt="" />
-        <span class="bottom-tags">{{ processedCardData.shares }}</span>
-      </div>
-    </div>
-    <div (click)="handleUserProfileClicked()" class="flex items-center gap-x-1">
-      <span class="text-[13px] userIconText">
-        {{ processedCardData.users }}
-        <span class="user-icon-text" *ngIf="processedCardData.users > 0">Users</span>
-      </span>
-      <app-users-stack [size]="14" [images]="images"></app-users-stack>
-    </div>
-  </div>
-</lib-base-card>

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.scss

@@ -1,85 +0,0 @@
-@use "../../_styles/colors" as *;
-
-.card-component {
-  --width: auto;
-  background: $background-color-1;
-}
-
-.bottom-tags {
-  font-size: 12px;
-}
-
-.draft-header {
-  color: $text-color-4;
-  font-weight: normal !important;
-  font-size: 11px !important;
-  margin-top: 7px;
-  position: relative;
-}
-
-.draft-description {
-  color: $text-color-3;
-}
-
-.usericon-text {
-  color: $text-color-4;
-  margin-top: 2px;
-  font-size: 11px;
-}
-
-.bottom-icons {
-  height: 15px;
-  width: 16px;
-}
-
-.bottom-icons:last-child {
-  height: 16px !important;
-  width: 17px !important;
-}
-
-.card-image {
-  width: 100%;
-}
-
-.bottom-bar-loc {
-  background: $background-color-9 !important;
-  width: 5rem !important;
-  bottom: 1rem !important;
-}
-
-.location-item-main {
-  font-size: 12px;
-}
-
-.location-item-main span {
-  margin-top: 2px;
-  font-size: 12px;
-}
-
-.location-item span {
-  color: $text-color-7 !important;
-  font-size: 13px;
-  margin-top: 2px;
-}
-
-.drah-voter-header {
-  font-family: Gilroy-Thin;
-  margin-top: 5px !important;
-}
-
-.title {
-  font-family: var(--font-gilroy-bold);
-}
-
-.h-1 {
-  opacity: 0.1 !important;
-}
-
-.content-card {
-  padding: 0 !important;
-}
-
-.startItinerary {
-  position: relative;
-  top: -4px;
-}

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.spec.ts

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

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.ts

@@ -1,116 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
-import { LibMenuItem } from '@naniteninja/ionic-lib';   
-import { ICONS } from '../../_constants/constants';
-import { ICardData } from '../../_interface/cardData';
-import { Iicon } from '../../_interface/icon';
-import { Itinerary } from '../../_models/Itinerary';
-
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'app-cutom-card',
-    templateUrl: './cutom-card.component.html',
-    styleUrl: './cutom-card.component.scss',
-    standalone: false
-})
-export class CutomCardComponent {
-  @Input() libMenuItem!: LibMenuItem[];
-  @Input() isDraft!: boolean;
-  @Input() cardData: Itinerary | undefined;
-  processedCardData: ICardData | undefined;
-  @Input() displayPublishStatus!: boolean;
-  ICONS: Iicon = ICONS;
-  @Input() images: string[] = [];
-  @Input() itineraryStarted: boolean = false;
-  @Output() StartItineraryClick: EventEmitter<void> = new EventEmitter<void>();
-  @Output() TitleClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() forkClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() messageClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() userProfileClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() itineraryWatchingUsersClicked: EventEmitter<void> = new EventEmitter<void>();
-
-  @Output() imageClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() eyeClicked: EventEmitter<void> = new EventEmitter<void>();
-  @Output() menuClicked: EventEmitter<Itinerary> = new EventEmitter<Itinerary>();
-
-  cardDataForLocations = {
-    locationColumn1: [
-      { icon: ICONS['temp'], name: 'Palace' },
-      { icon: ICONS['palace2'], name: 'Template' },
-      { icon: ICONS['palace2'], name: 'Optional' },
-      { icon: ICONS['palace2'], name: 'Optional' },
-    ],
-    locationColumn2: [
-      { icon: ICONS['coffee'], name: 'Coffee shop' },
-      { icon: ICONS['template'], name: 'Optional' },
-      { icon: ICONS['template'], name: 'Optional' },
-      { icon: ICONS['template'], name: 'Optional' },
-    ],
-  };
-
-  constructor(
-  ) { }
-
-  ngOnInit(): void {
-    if(this.cardData) {
-      this.processedCardData = this.processCardData(this.cardData);
-    }
-  }
-
-  private nullCheck(data: string | number | null | undefined): boolean {
-    return (
-      data?.toString().length == 0 ||
-      data == null ||
-      data == undefined ||
-      data == '0' ||
-      data == 0 ||
-      data == '-'
-    );
-  }
-
-  parseStringToNumber(value: string) {
-    return parseInt(value);
-  }
-
-  private processCardData(data: Itinerary): ICardData {
-    return {
-      ...data,
-      id: data.id,
-      upVotes: data.stats?.upvotes?.toString() ?? '0',
-      downVotes: this.nullCheck(data.stats?.downvotes) ? 0 : (data.stats?.downvotes ?? 0),
-      title: this.nullCheck(data.name) ? 'Untitled Itinerary' : data.name,
-      userName: this.nullCheck(data.user?.name) ? 'You' : (data.user?.name === "Jonathan" ? 'You' : (data.user?.name ?? "")),//Temporarily added Jonathan will need to change once user data is available in application
-      timeAgo: this.nullCheck(data.createdAt) ? '' : '2 hours ago',
-      users: 4,
-      views: this.nullCheck(data.stats?.views) ? 0 : (data.stats?.views ?? 0),
-      comments: 0,
-      shares: this.nullCheck(data.stats?.shares) ? 0 : (data.stats?.shares ?? 0),
-      imageSrc: data.isDraft ? ICONS['untitled'] : (data.image ?? ICONS['untitled']),
-      userimageSrc: data.user?.image
-        ?? ICONS['notSpecified'],
-      location: this.nullCheck(data.startLocation?.address) ? 'Not Specified' : (data.startLocation?.address ?? ""),
-      isDraft: data.isDraft ?? false
-    };
-  }
-
-  handleMenueItemSelect(): void { }
-  handleMenuItemChange(): void { }
-  handleMenuClick(): void { this.menuClicked.emit(this.cardData) }
-
-  handleForkClick = (): void => this.forkClicked.emit();
-  handleStartItineraryClick = (): void => this.StartItineraryClick.emit();
-  handleTitleClick = (): void => this.TitleClicked.emit();
-  handleMessageClicked = (): void => this.messageClicked.emit();
-  handleUserProfileClicked = (): void => this.userProfileClicked.emit();
-  handleImageClick = (): void => this.imageClicked.emit();
-  handleEyeClicked = (): void => this.eyeClicked.emit();
-
-  handleItineraryWatchingClicked(): void {
-    this.itineraryWatchingUsersClicked.emit();
-  }
-}

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.html

@@ -1,7 +0,0 @@
-<div
-  [routerLink]="routerLink"
-  class="bottom-nav-item flex flex-col items-center"
->
-  <img [src]="iconPath" class="bottom-nav-image" />
-  <span [class]="cssClass + ' span-text'">{{ label }}</span>
-</div>

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.scss

@@ -1,50 +0,0 @@
-@use "../../../../_styles/colors" as *;
-
-.bottom-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 30px;
-  max-width: 60px;
-}
-
-.bottom-nav-image {
-  height: 16px;
-  width: 17px;
-}
-
-.bottom-nav-item {
-  span {
-    color: $text-color-3;
-    opacity: 0.3;
-    font-size: 11px;
-    line-height: 15px;
-  }
-}
-
-.bottom-nav-item {
-  .spanText:nth-child(3) {
-    background: red !important;
-    margin-top: 3px !important;
-  }
-}
-
-.dashboard-active.span-text {
-  background-image: linear-gradient(
-    208.61deg,
-    $scroll-color -5.8%,
-    $background-color-6 192.44%
-  ) !important;
-
-  /* Clip the gradient to the text */
-  -webkit-background-clip: text !important;
-  background-clip: text !important; /* Standard property for non-webkit browsers */
-
-  /* Make text color transparent to reveal the gradient */
-  color: transparent !important;
-
-  /* For better cross-browser support */
-  display: inline !important;
-  opacity: 100% !important;
-}

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.spec.ts

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

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.ts

@@ -1,16 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'app-bottom-navigation-items',
-    templateUrl: './bottom-navigation-items.component.html',
-    styleUrl: './bottom-navigation-items.component.scss',
-    standalone: false
-})
-export class BottomNavigationItemsComponent {
-  @Input() label!: string;
-  @Input() iconPath!: string;
-  @Input() routerLink!: string;
-  @Input() cssClass!: string;
-  @Input() selected!: boolean;
-}

package/src/lib/itinerary-app/shared/footer/footer.component.html

@@ -1,12 +0,0 @@
-<div class="bottom-nav-main">
-  <app-bottom-navigation-items
-    (click)="navigate(bottomNavigationService.bottomNavList, item)"
-    *ngFor="let item of bottomNavigationService.bottomNavList"
-    [cssClass]="item.cssClass"
-    [routerLink]="item.routerLink"
-    [label]="item.label"
-    [iconPath]="
-      item.cssClass == 'active' ? item.clickedIconPath : item.iconPath
-    "
-  />
-</div>

package/src/lib/itinerary-app/shared/footer/footer.component.scss

@@ -1,29 +0,0 @@
-@use "../../_styles/colors" as *;
-
-.bottom-navigation {
-  background: $background-color-5;
-  padding: 15px 10px;
-  z-index: 999;
-  box-shadow: var(
-    --lib-popup-modal-shadow,
-    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
-    -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
-  ) !important;
-}
-
-.bottom-nav-main {
-  display: flex;
-  position: fixed !important;
-  bottom: 0 !important;
-  justify-content: space-between !important;
-  width: 100% !important;
-  padding: 23.09px 25.98px;
-  background-color: $background-color-1;
-  left: 0;
-}
-
-.bottom-nav-main {
-  @media (min-width: 768px) {
-    display: none;
-  }
-}

package/src/lib/itinerary-app/shared/footer/footer.component.ts

@@ -1,137 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewEncapsulation,
-} from '@angular/core'; 
-import { IBottomNavigationList } from '../../_interface/bottomNavigationList';
-import { BottomNavigationService } from '../../_services/bottom-navigation.service';
-import { ShadowRootHandlerService } from '../../_services/shadow-root-handler.service';
-import { NavigationEnd, Router } from '@angular/router';
-import { filter } from 'rxjs';
-
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'app-footer',
-    templateUrl: './footer.component.html',
-    styleUrls: ['./footer.component.scss'],
-    encapsulation: ViewEncapsulation.Emulated,
-    standalone: false
-})
-export class FooterComponent implements OnInit, AfterViewInit {
-  public enableBack: boolean = false;
-
-  constructor(
-    private el: ElementRef,
-    private shadowrootHandler: ShadowRootHandlerService,
-    public bottomNavigationService: BottomNavigationService,
-    private cdr: ChangeDetectorRef,
-    private readonly router: Router,
-  ) {}
-
-  ngOnInit(): void {
-    this.router.events
-    .pipe(
-      filter(
-        (event): event is NavigationEnd => event instanceof NavigationEnd,
-      ),
-    )
-    .subscribe((event: NavigationEnd) => {
-      const navItem = this.findNavItem(event.urlAfterRedirects);
-      if(navItem) {
-        this.bottomNavigationService.setActive(navItem);
-        this.cdr.detectChanges();
-      }
-    });
-
-    const initialLoadUrl = setTimeout(() => {
-      const navItem = this.findNavItem(this.router.url);
-      if(navItem) {
-        this.bottomNavigationService.setActive(navItem);
-        this.cdr.detectChanges();
-      }
-      clearTimeout(initialLoadUrl);
-    });
-
-    this.enableBack = true;
-    this.cdr.detectChanges();
-  }
-
-  findNavItem(url: string): IBottomNavigationList | undefined {
-      const homeNavItem = this.bottomNavigationService.bottomNavList.find((bottomnNavList) => {
-        return bottomnNavList.label === 'Home';
-      });
-      if(url === '/archives/archives') {
-        const activeNav = this.bottomNavigationService.bottomNavList.find((bottomnNavList) => {
-          return bottomnNavList.label === 'Itineraries';
-        });
-        return activeNav;
-      }
-      if(homeNavItem?.routerLink === url) {
-        return homeNavItem;
-      } else {
-        let activeNav = this.bottomNavigationService.bottomNavList.find((item) =>
-          url.includes(item.routerLink) 
-        );
-        if(activeNav) {
-          return activeNav;
-        }
-      }
-      return undefined;
-  }
-
-  ngAfterViewInit(): void {
-    this.initShadowrootHandler();
-  }
-
-  navigate(
-    bottomNavList: IBottomNavigationList[],
-    item: IBottomNavigationList,
-  ): void {
-    this.bottomNavigationService.onNavigationChange(bottomNavList, item);
-  }
-
-  initShadowrootHandler(): void {
-    const targetNode = this.el.nativeElement;
-    this.shadowrootHandler.accessShadowRoot(
-      targetNode,
-      'lib-bottom-modal',
-      () => {
-        this.applyStylesToDialog();
-      },
-    );
-  }
-
-  applyStylesToDialog(): void {
-    const targetNode = this.el.nativeElement.querySelector(
-      'lib-bottom-modal',
-    ) as HTMLElement;
-
-    if (targetNode) {
-      const classNameElements =
-        targetNode.getElementsByClassName('lib-bottom-modal');
-
-      if (classNameElements.length > 0) {
-        const dialogDiv = classNameElements[0].shadowRoot?.querySelector(
-          'div[role="dialog"]',
-        ) as HTMLElement;
-
-        if (dialogDiv) {
-          const modalHandle = dialogDiv.getElementsByClassName(
-            'modal-handle',
-          )[0] as HTMLElement;
-          if (modalHandle) {
-            modalHandle.style.display = 'none';
-          } else {
-          }
-        } else {
-        }
-      } else {
-      }
-    } else {
-    }
-  }
-}

package/src/lib/itinerary-app/shared/header/header.component.html

@@ -1,23 +0,0 @@
-<div
-  [class]="'header-main-bar flex items-center justify-between ' + cssClass"
->
-  <lib-icon-btn class="checkmark-icon-button w-[20%]" (click)="firstButtonClick()">
-    <img [ngSrc]="ICONS['back']" height="12.5" width="14" />
-  </lib-icon-btn>
-  <div class="flex w-[60%] justify-center">
-    <h4 class="mr-1">{{ heading }}</h4>
-    <img
-      *ngIf="titleIcon"
-      [src]="ICONS['editPink']"
-      (click)="onTitleIconClick()"
-      height="8"
-      width="8"
-    />
-  </div>
-  <div class="w-[20%] flex justify-end">
-    <ng-container *ngIf="headerSuffixTemplate">
-      <ng-container *ngTemplateOutlet="headerSuffixTemplate"></ng-container>
-    </ng-container>
-    <div *ngIf="!headerSuffixTemplate"></div>
-  </div>
-</div>

package/src/lib/itinerary-app/shared/header/header.component.scss

@@ -1,18 +0,0 @@
-@use "../../_styles/colors" as *;
-@use "../../_styles/fonts" as *;
-
-.header-main-bar {
-  font-family: $header-font;
-  margin-top: 54px;
-  h4 {
-    font-size: 14.77px !important;
-  }
-}
-.checkmark-icon-button {
-  transform: scale(.9);
-}
-
-::ng-deep .lib-popup-modal {
-  --background: transparent !important;
-  --box-shadow: none !important;
-}