@flower-city-online/itinerary-lib 0.0.19 → 0.0.21

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

@@ -1,283 +0,0 @@
-@use "../../_styles/colors" as *;
-
-.card-component {
-  --width: auto;
-  background: $background-color-1;
-  padding: 0px;
-  box-sizing: border-box;
-}
-
-.carousel-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 85vh;
-  overflow: hidden;
-  padding: 0px;
-  box-sizing: border-box;
-}
-
-.carousel {
-  position: relative;
-  width: 90%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-
-}
-
-.card {
-  background-color: gray;
-  position: relative;
-  width: 100%;
-  border-radius: 6.56px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  align-items: center;
-  font-size: 1.5rem;
-  font-weight: bold;
-  transition: transform 0.5s ease-in-out, opacity 0.3s ease;
-  transform: translateY(100%); // Default starting state
-
-
-  &.above {
-    transform: translateY(-100%);
-    border-radius: 0px 0px 6.56px 6.56px;
-    opacity: 0.5;
-    z-index: 1;
-    height: 10%;
-    width: 90%;
-  }
-
-  &.active {
-    transform: translateY(0);
-    opacity: 1;
-    z-index: 2;
-    height: 100%;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
-  &.below {
-    transform: translateY(100%);
-    border-radius: 6.56px 6.56px 0px 0px;
-    opacity: 0.5;
-    z-index: 1;
-    height: 10%;
-    width: 90%;
-  }
-
-  &.slide-up {
-    animation: slideUpIn 0.5s ease-out forwards;
-  }
-
-  &.slide-down {
-    animation: slideDownOut 0.5s ease-in forwards;
-  }
-}
-
-@keyframes slideUpIn {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideDownOut {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-.header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  background: #1a1a1a;
-  border-radius: 12px 12px 0 0;
-
-  .back-btn,
-  .menu-btn {
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: white;
-    cursor: pointer;
-  }
-
-  .user-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-    }
-
-    .username {
-      color: white;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .icon-crown {
-      color: gold;
-      font-size: 18px;
-    }
-  }
-}
-
-.progress-bar {
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(to right, #eaeaea80, #eaeaea80);
-  margin-top: 4px;
-  border-radius: 2px;
-  margin-left: 2px;
-}
-
-.story-content {
-  background: #27242c;
-  box-shadow:
-    9.0255px 8.205px 22.1535px rgba(17, 16, 20, 0.65),
-    -4.1025px -4.1025px 13.128px rgba(203, 199, 209, 0.25);
-  border-radius: 6.564px;
-}
-
-.votes-Count {
-  font-weight: 600;
-  font-size: 9.846px;
-  color: #ffffff;
-  text-shadow: 0px 1.06548px 2.13097px rgba(0, 0, 0, 0.5);
-}
-
-.story-title {
-  font-weight: 500;
-  font-size: 19.692px;
-  line-height: 100%;
-  display: flex;
-  align-items: center;
-  color: #ffffff;
-  text-shadow: 0px 1.06548px 2.13097px rgba(0, 0, 0, 0.5);
-}
-
-.story-bottom-info-badge {
-  font-family: "Gilroy";
-  font-style: normal;
-  font-weight: 500;
-  font-size: 8.205px;
-  line-height: 100%;
-  display: flex;
-  align-items: center;
-  text-wrap: nowrap;
-}
-
-.ellipsis {
-  white-space: nowrap;      /* keep text on one line */
-  overflow: hidden;         /* hide extra text */
-  text-overflow: ellipsis;
-}
-
-.story-bottom-buttons-pink {
-  color: #fe3c72;
-}
-
-.story-bottom-buttons-white {
-  color: white;
-}
-
-.story-text {
-  font-weight: 400;
-  font-size: 9.846px;
-  line-height: 150%;
-  text-align: start;
-  letter-spacing: -0.011em;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.read-more-text {
-  font-weight: 400;
-  font-size: 9.846px;
-  line-height: 150%;
-  letter-spacing: -0.011em;
-  color: #fe3c72;
-}
-
-.story-avatar{
-  width: 28px;
-  height: 28px;
-}
-
-.story-img {
-  position: relative;
-  z-index: 0;
-}
-
-.story-img::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.25) 0%,
-    rgba(0, 0, 0, 0.1) 21.35%,
-    rgba(0, 0, 0, 0) 51.04%,
-    rgba(0, 0, 0, 0.22) 69.27%,
-    rgba(0, 0, 0, 0.35) 100%
-  );
-  z-index: 1;
-  pointer-events: none;
-}
-
-.story-img > * {
-  z-index: 2;
-}
-
-.pic-switch-bar {
-  z-index: 100;
-}
-
-.custom-padding {
-  padding-top: 130px;
-}
-.story-bottom-info {
-  bottom: 75px;
-  left: 18px;
-}
-.story-right-info {
-  bottom: 150px;
-  right: 10px;
-}
-// Optional: Responsive handling (you may uncomment and adjust as needed)
-/*
-.imageSize {
-  height: 80%;
-}
-@media screen and (max-width: 375px) and (max-height: 667px) {
-  .imageSize {
-    height: 100%;
-  }
-}
-@media screen and (min-height: 915px) {
-  .imageSize {
-    height: 75%;
-  }
-}
-*/

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

@@ -1,181 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  HostListener,
-  Input,
-  OnInit
-} from '@angular/core';
-import { Router } from '@angular/router';
-import { LibMenuItem } from '@naniteninja/ionic-lib';   
-import { ICONS } from '../../_constants/constants';
-import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
-import { ICardData } from '../../_interface/cardData';
-import { Iicon } from '../../_interface/icon';
-import { ApiService } from '../../_services/api.service';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'app-custom-story-card',
-  templateUrl: './custom-story-card.component.html',
-  styleUrl: './custom-story-card.component.scss',
-})
-export class CustomStoryCardComponent implements OnInit {
-  @Input() libMenuItem!: LibMenuItem[];
-  @Input() isDraft!: boolean;
-  cardData: ICardData | undefined;
-  private scrollTimeout: any;
-   private isScrolling = false;
-  processedCardData: ICardData | undefined;
-  ICONS: Iicon = ICONS;
-  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' },
-    ],
-  };
-
-    images: string[] = [
-      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg",
-      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg",
-      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg"
-    ]
-
-  constructor(
-    private apiService: ApiService,
-    private router: Router,
-    private cdr: ChangeDetectorRef,
-  ) {}
-
-  @HostListener('window:wheel', ['$event'])
-  onWheel(event: WheelEvent) {
-    if (!this.isScrolling) {
-      this.isScrolling = true;
-
-      if (event.deltaY > 0) {
-        console.log('scroll down');
-        // Trigger your "next video" or content change here
-      } else if (event.deltaY < 0) {
-        console.log('scroll up');
-        // Trigger your "previous video" or content change here
-      }
-
-      // Wait until the gesture is finished
-      this.scrollTimeout = setTimeout(() => {
-        this.isScrolling = false;
-      }, 500); // Adjust this duration to feel smoother or stricter
-    }
-
-    // Optional: reset timeout if new scroll comes before timeout ends
-    clearTimeout(this.scrollTimeout);
-    this.scrollTimeout = setTimeout(() => {
-      this.isScrolling = false;
-    }, 500);
-  }
-
-  ngOnInit(): void {
-    this.loadCardData();
-    this.libMenuItem = this.libMenuItem.map((val) => {
-      if (val.title === 'EDIT_COMMENT') {
-        return {
-          ...val,
-          command: () => {
-            this.navToUpdateComment();
-          },
-        };
-      }
-      return val;
-    });
-  }
-
-  private InvalidDataCheck(data: string | number | null | undefined): boolean {
-    return (
-      data?.toString().length == 0 ||
-      data == null ||
-      data == undefined ||
-      data == '0' ||
-      data == 0 ||
-      data == '-'
-    );
-  }
-
-  private processCardData(data: ICardData): ICardData {
-    return {
-      ...data,
-      id: data.id ?? '0',
-      upVotes: this.InvalidDataCheck(data.upVotes) ? '00' : data.upVotes,
-      title: this.InvalidDataCheck(data.title)
-        ? 'Untitled Itinerary'
-        : data.title,
-      userName: this.InvalidDataCheck(data.userName) ? 'You' : data.userName,
-      timeAgo: this.InvalidDataCheck(data.timeAgo) ? '' : data.timeAgo,
-      users: this.InvalidDataCheck(data.users) ? 0 : data.users,
-      views: this.InvalidDataCheck(data.views) ? 0 : data.views,
-      comments: this.InvalidDataCheck(data.comments) ? 0 : data.comments,
-      shares: this.InvalidDataCheck(data.shares) ? 0 : data.shares,
-      imageSrc: this.InvalidDataCheck(data.imageSrc)
-        ? ICONS['untitled']
-        : data.imageSrc,
-      userimageSrc: this.InvalidDataCheck(data.userimageSrc)
-        ? ICONS['notSpecified']
-        : data.userimageSrc,
-      location: this.InvalidDataCheck(data.location)
-        ? 'Not Specified'
-        : data.location,
-    };
-  }
-
-  loadCardData() {
-    if (!this.isDraft) {
-      this.apiService.get('/assets/data.json').subscribe((data) => {
-        this.cardData = data as ICardData;
-        this.processedCardData = this.processCardData(this.cardData);
-        this.cdr.detectChanges();
-      });
-    } else {
-      this.cardData = this.createDummyCard();
-      this.processedCardData = this.processCardData(this.cardData);
-    }
-  }
-  createDummyCard(): ICardData {
-    let card: ICardData;
-    card = {
-      id: '1',
-      upVotes: '',
-      downVotes: 5,
-      title: '',
-      userName: '',
-      timeAgo: '',
-      location: '',
-      views: 0,
-      comments: 0,
-      shares: 0,
-      users: 0,
-      imageSrc: '',
-      userimageSrc: '',
-      isDraft: true,
-    };
-
-    return card;
-  }
-  handleMenueItemSelect(): void {}
-  handleMenuItemChange(): void {}
-  handleMenuClick(): void {}
-
-  goBack(){
-    window.history.back();
-  }
-
-  //NAVIGATION
-  navToUpdateComment(): void {
-    this.router.navigate([ItinerariesRoutesEnum.COMMENTS, this.cardData?.id]);
-  }
-}

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

@@ -1,120 +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">
-      <!-- <div *ngIf="itineraryStarted" (click)="handleStartItineraryClick()" class="startItinerary">
-        <img [src]="ICONS['startItinerary']" alt="icon" />
-      </div> -->
-      <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>
-      <!--  <img [src]="processedCardData.userimageSrc" alt="" /> -->
-    </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();
-  });
-});