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

package/src/lib/itinerary-app/shared/custom-heading-with-button/custom-heading-with-button.component.ts

@@ -0,0 +1,22 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-custom-heading-with-button',
+    templateUrl: './custom-heading-with-button.component.html',
+    styleUrl: './custom-heading-with-button.component.scss',
+    standalone: false
+})
+export class CustomHeadingWithButtonComponent {
+  @Input() heading!: string;
+  @Input() buttonText!: string;
+  @Input() buttonIcon!: string;
+  @Input() cssClass!: string;
+  @Output() buttonClick = new EventEmitter<MouseEvent>();
+}

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

@@ -0,0 +1,113 @@
+<div class="carousel-container w-full bg-transparent">
+  <div class="carousel">
+    <div
+      class="card active bg-cover bg-center bg-no-repeat story-img bg-transparent m-0"
+      [style.background-image]="'url(' + image + ')'"
+    >
+      <div class="flex h-[50px] items-center">
+        <button (click)="goBack()">
+          <img loading="lazy" [src]="ICONS['back']" alt="Back" class="p-[13px]"/>
+        </button>
+        <h5 class="text-secondary text-[10px] xs:text-[9px] flex gap-[6px] items-center mx-[8px]">
+          <img loading="lazy" [src]="ICONS['userReal']" alt="User" />
+          <span>{{ processedCardData?.userName }} </span>
+          <img loading="lazy" [src]="ICONS['king']" alt="Favorite" />
+        </h5>
+        <lib-menu-btn (select)="handleMenueItemSelect()" (click)="handleMenuClick()" (change)="handleMenuItemChange()"
+          class="lib-menu-custom-class lib-menu-bg-none ms-auto" [disableTextShadow]="true" [menuItems]="libMenuItem">
+          <img loading="lazy" [src]="ICONS['horizontalWhite']" alt="tricolon" class="p-[6px]" />
+        </lib-menu-btn>
+      </div>
+
+      <div class="flex px-[12px]">
+        <div class="progress-bar"></div>
+        <div class="progress-bar"></div>
+        <div class="progress-bar"></div>
+      </div>
+
+      <div class="p-[12px]">
+        <div class="flex items-start story-content mb-[30px] p-[12px]"  *ngFor="let item of [1, 2, 3]" style="height: 91.9px;">
+          <div class="items-center sm:text-[10px] xs:text-[9px] flex flex-col gap-y-[0px] px-1">
+            <img loading="lazy" [src]="ICONS['upvote']" alt="Upvote" />
+            <span [class]="!isDraft ? 'text-primary' : 'drah-voter-header'">
+              {{ processedCardData?.upVotes }}
+            </span>
+            <img loading="lazy" [src]="ICONS['downvote']" alt="Downvote" />
+          </div>
+          <div class="py-[8px] px-[4px]">
+            <h5 class="text-secondary mb-2 opacity-80 text-[20px] xs:text-[15px] flex gap-[6px] items-center">
+              <img loading="lazy" class="story-avatar" [src]="ICONS['userReal']" alt="User" width="20" height="20"/>
+              <span class="story-author">{{ processedCardData?.userName }} </span>
+              <img loading="lazy" [src]="ICONS['king']" alt="Favorite" />
+            </h5>
+            <div class="relative">
+              <p class="story-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt and also other texts
+                <span class="read-more-text">Read More</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start justify-end absolute story-right-info">
+        <div>
+          <div class="mb-[26px] flex flex-col items-center">
+            <img loading="lazy" [src]="ICONS['upvoteWhite']" alt="Upvote" />
+            <span class="votes-Count">
+              {{ processedCardData?.upVotes }}
+            </span>
+            <img loading="lazy" [src]="ICONS['downvoteWhite']" alt="Downvote" />
+          </div>
+
+          <div class="mb-[26px] flex flex-col items-center">
+            <img loading="lazy" class="mb-[4px]" [src]="ICONS['message']" alt="Message" />
+            <span class="votes-Count"> 23 </span>
+          </div>
+
+          <div class="mb-[16px] flex flex-col items-center">
+            <img loading="lazy" class="mb-[4px]" [src]="ICONS['forward']" alt="Forward" />
+            <span class="votes-Count"> Share </span>
+          </div>
+          <div class="flex flex-col items-center">
+            <img loading="lazy" class="mb-[4px]" [src]="ICONS['badge_check']" alt="Check" />
+          </div>
+        </div>
+      </div>
+      <div class="text-white absolute w-full story-bottom-info">
+        <div class="flex-1">
+          <h2 class="text-2xl font-bold story-title mb-[8px]">Adventure Tour</h2>
+          <div class="mb-[12px]">
+            <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
+              <img loading="lazy" [src]="ICONS['userReal']" alt="User" width="12px" height="12px" />
+              <span>{{ processedCardData?.userName }} - {{ processedCardData?.timeAgo }}</span>
+            </h5>
+          </div>
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <!-- Left-aligned div -->
+          <div class="flex space-x-1 justify-start">
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-pink"><img loading="lazy" [src]="ICONS['temp']" alt="Place" />
+              Palace</span>
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-white"><img loading="lazy" [src]="ICONS['coffee']" alt="Coffee" />
+              Coffee</span>
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-white"><img loading="lazy" [src]="ICONS['template']" alt="Temple" />
+              Temple</span>
+            <span class="story-bottom-info-badge font-bold story-bottom-buttons-white">More +6</span>
+          </div>
+          <!-- Right-aligned div -->
+          <div class="flex justify-end items-end">
+            <div class="flex">
+              <div class="flex items-end gap-x-2">
+                <span class="text-xs user-text text-nowrap">
+                  {{ processedCardData?.users }}
+                  <span *ngIf="processedCardData && processedCardData!.users > 0">Users</span>
+                </span>
+                <img loading="lazy" [src]="processedCardData?.userimageSrc" alt="UserPic" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,286 @@
+@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: 82.5vh;
+  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%;
+  }
+
+  &.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);
+  line-height: 100%;
+}
+
+.story-title {
+  font-weight: 500;
+  font-size: 19.692px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  text-shadow: 0px 1.07px 2.13px 0px #00000080;
+}
+
+.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);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;   /* limit to 2 lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.read-more-text {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-weight: 400;
+  font-size: 9.846px;
+  line-height: 150%;
+  letter-spacing: -0.011em;
+  color: #fe3c72;
+  padding-left: 4px;
+  background-color: #27242c;
+}
+
+.story-avatar{
+  width: 20px;
+  height: 20px;
+}
+
+.story-author {
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 13.13px;
+  line-height: 160%;
+  letter-spacing: 0%;
+}
+
+.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: 16px;
+  padding: 0 12px;
+}
+.story-right-info {
+  top: 260px;
+  right: 8px;
+}
+.user-text {
+  font-size: 9.85px;
+  font-weight: 600;
+}

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

@@ -0,0 +1,183 @@
+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';
+import { Location } from '@angular/common';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-custom-story-card',
+    templateUrl: './custom-story-card.component.html',
+    styleUrl: './custom-story-card.component.scss',
+    standalone: false
+})
+export class CustomStoryCardComponent implements OnInit {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() isDraft!: boolean;
+  cardData: ICardData | undefined;
+  private scrollTimeout: number | undefined;
+  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"
+  ]
+  image: string = "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg";
+
+  constructor(
+    private apiService: ApiService,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+    private location: Location
+  ) { }
+
+  @HostListener('window:wheel', ['$event'])
+  onWheel(event: WheelEvent) {
+    if (!this.isScrolling) {
+      this.isScrolling = true;
+
+      if (event.deltaY > 0) {
+        // Trigger your "next video" or content change here
+      } else if (event.deltaY < 0) {
+        // Trigger your "previous video" or content change here
+      }
+
+      // Wait until the gesture is finished
+      this.scrollTimeout = window.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 = window.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() {
+    this.location.back();
+  }
+
+  //NAVIGATION
+  navToUpdateComment(): void {
+    this.router.navigate([ItinerariesRoutesEnum.COMMENTS, this.cardData?.id]);
+  }
+}