@flower-city-online/itinerary-lib 0.0.9 → 0.0.11

package/src/lib/itinerary-app/modules/itineraries/itineraries.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router'; 
+import { ModalService } from '../../_services/modal.service';
+import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../_interface/icon';
+import { ICONS } from '../../_constants/constants';
+import { ModalShareUrlClientService } from '../../_services/modal.shareurlservice';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-home',
+  templateUrl: './itineraries.component.html',
+  styleUrl: './itineraries.component.scss',
+})
+export class ItinerariesComponent {
+  ICONS: Iicon = ICONS;
+
+  constructor(
+    public router: Router,
+    public modalService: ModalService,
+    public shareModalService: ModalShareUrlClientService
+  ) {}
+
+  backButtonClick(): void {
+    window.history.back();
+  }
+
+  searchButtonClick(): void {
+    this.router.navigate([ItinerariesRoutesEnum.SEARCH]).then((_r) => {});
+  }
+
+  closeUrlShareModal() {
+    this.shareModalService.toggleModal = !this.shareModalService.toggleModal;
+  }
+
+  copyButtonClicked() {
+    navigator.clipboard.writeText(
+      window.location.origin + ItinerariesRoutesEnum.ITINERARY
+      + '/' + ItinerariesRoutesEnum.ITINERARY_DETAIL);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/itineraries.module.ts

@@ -0,0 +1,223 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
+import { MatIcon } from '@angular/material/icon'; 
+import {
+  ButtonsModule,
+  DashedCheckboxModule,
+  DirectiveModule,
+  FooterSharedComponent,
+  FormFieldModule,
+  GridFiltersModule,
+  GridModule,
+  ImageDeckComponent,
+  InfoCardPlaceholderModule,
+  InputFieldModule,
+  InputFieldSelectModule,
+  LibMapModule,
+  LibModalModule,
+  LibPercentageBarModule,
+  LibTabMenuModule,
+  LibToastrModule,
+  LibToastrStackModule,
+  NotificationsModule,
+  ProgressBarModule,
+  RangeSelectorModule,
+  SearchBarModule,
+  SectionSeparatorComponent,
+  SelectableModule,
+  TextBoxComponent,
+  ToggleModule,
+  UserMenuComponent
+} from '@naniteninja/ionic-lib'; 
+import { DeleteItinerariesComponent } from './components/delete-itineraries/delete-itineraries.component';
+import { FilterMenuComponent } from './components/filter-menu/filter-menu.component';
+import { ReportItineraryModalComponent } from './components/report-itinerary-modal/report-itinerary-modal.component';
+import { ItinerariesRoutingModule } from './itineraries-routing.module';
+import { ItinerariesComponent } from './itineraries.component';
+import { AdvancedFiltersComponent } from './pages/advanced-filters/advanced-filters.component';
+import { BranchedItinerariesComponent } from './pages/branched-itineraries/branched-itineraries.component';
+import { CreateItineraryModalItemComponent } from './pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component';
+import { CreateItineraryModalComponent } from './pages/builder/components/create-itinerary-modal/create-itinerary-modal.component';
+import { CreateItineraryComponent } from './pages/builder/pages/create-itinerary/create-itinerary.component';
+import { CommentRepliesComponent } from './pages/comment-replies/comment-replies.component';
+import { CommentSingleComponent } from './pages/comment-replies/components/comment-single/comment-single.component';
+import { CommentComparisonComponent } from './pages/comments/comment-comparison/comment-comparison.component';
+import { CommentSearchComponent } from './pages/comments/comment-search/comment-search.component';
+import { CommentsPageComponent } from './pages/comments/comments-page.component';
+import { HandleUpdateCommentRequestComponent } from './pages/comments/handle-update-comment-request/handle-update-comment-request.component';
+import { ExploreComponent } from './pages/explore/explore.component';
+import { FavoritesComponent } from './pages/favorites/favorites.component'; 
+import { DetailsComponent } from './pages/itinerary-detail/components/details/details.component';
+import { MapComponent } from './pages/itinerary-detail/components/map/map.component';
+import { SummaryComponent } from './pages/itinerary-detail/components/summary/summary.component';
+import { ItineraryDetailComponent } from './pages/itinerary-detail/itinerary-detail.component';
+import { ItineraryAuthorHistoryComponent } from './pages/itinerary-author-history/itinerary-author-history.component';
+import { ItineraryUpvoteUsersComponent } from './pages/itinerary-upvote-users/itinerary-upvote-users.component';
+import { ItineraryUsersComponent } from './pages/itinerary-users/itinerary-users.component';
+import { ItineraryWatchingUsersComponent } from './pages/itinerary-watching-users/itinerary-watching-users.component';
+import { ExistingFriendsComponent } from './pages/itinerary-friends/existing-friends/existing-friends.component';
+import { FriendRequestsComponent } from './pages/itinerary-friends/friend-requests/friend-requests.component';
+import { ItineraryFriendsComponent } from './pages/itinerary-friends/itinerary-friends.component';
+import { ListFriendUsersComponent } from './pages/itinerary-friends/list-friend-users/list-friend-users.component';
+import { SendFriendRequestComponent } from './pages/itinerary-friends/send-friend-request/send-friend-request.component';
+import { AllPeopleComponent } from './pages/itinerary-members/all-people/all-people.component';
+import { ExistingMembersComponent } from './pages/itinerary-members/existing-members/existing-members.component';
+import { ItineraryMembersComponent } from './pages/itinerary-members/itinerary-members.component';
+import { UserList } from './pages/itinerary-members/user-list/user-list.component';
+import { CreateItineraryDestinationComponent } from './pages/builder/pages/create-itinerary-destination/create-itinerary-destination.component';
+import { CreateItineraryHeaderComponent } from './pages/builder/pages/create-itinerary-header/create-itinerary-header.component';
+import { CreateItineraryMemberDetailsComponent } from './pages/builder/pages/create-itinerary-member-details/create-itinerary-member-details.component';
+import { CreateItineraryStartLocationComponent } from './pages/builder/pages/create-itinerary-start-location/create-itinerary-start-location.component';
+import { CreateItineraryUserSearchComponent } from './pages/builder/pages/create-itinerary-user-search/create-itinerary-user-search.component';
+import { CreatedItineraryDetailComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.component';
+import { CreatedItineraryMapComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component';
+import { CreatedItineraryPreviewComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-preview.component';
+import { CreatedItineraryComponent } from './pages/builder/pages/created-itinerary/created-itinerary.component';
+import { ItineraryAddPlaceComponent } from './pages/builder/pages/itinerary-add-place/itinerary-add-place.component';
+import { ItineraryPlaceBasicInfoComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component';
+import { ItineraryPlaceDateTimeComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-date-time/itinerary-place-date-time.component';
+import { ItineraryPlaceMembersComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-members/itinerary-place-members.component';
+import { LocationPickerComponent } from './pages/builder/pages/location-picker/location-picker.component';
+import { SelectItineraryEventComponent } from './pages/builder/pages/select-itinerary-event/select-itinerary-event.component';
+import { SuggestedEventsLocationComponent } from './pages/builder/pages/suggested-events-location/suggested-events-location.component';
+import { SuggestedEventsRouteRadiusComponent } from './pages/builder/pages/suggested-events-route-radius/suggested-events-route-radius.component';
+import { SuggestedEventsRouteTypeComponent } from './pages/builder/pages/suggested-events-route-type/suggested-events-route-type.component';
+import { ItinerarySentInvitesComponent } from './pages/itinerary-members/itinerary-sent-invites/itinerary-sent-invites.component';
+import { SendInviteComponent } from './pages/itinerary-members/send-invite/send-invite.component';
+import { NotificationsComponent } from './pages/notifications/notifications.component';
+import { StoryComponent } from './pages/stories/story.component';
+import { environment } from '../../../../environments/environment';
+import { SendToClientComponent } from './components/send-to-client/send-to-client.component';
+import { SharePopupComponent } from './components/share-popup/share-popup.component';
+import { CreateItineraryDrawModeComponent } from './pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component';
+import { CreateItineraryDrawPreviewComponent } from './pages/builder/pages/create-itinerary-draw-preview/create-itinerary-draw-preview.component';
+import { CreateItineraryNoVisualFilterComponent } from './pages/builder/pages/create-itinerary-no-visual-filter/create-itinerary-no-visual-filter.component';
+import { CreateItineraryNoVisualPreviewComponent } from './pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component';
+import { AppHeaderDesktopComponent } from './components/app-header-desktop/app-header-desktop.component';
+import { AppSidebarDesktopComponent } from './components/app-sidebar-desktop/app-sidebar-desktop.component';
+import { NoVisualMapFiltersComponent } from './components/no-visual-map-filters/no-visual-map-filters.component';
+import { BuilderComponent } from './pages/builder/builder.component';
+import { IonicModule } from '@ionic/angular';
+import { SharedModule } from '../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    ItinerariesComponent,
+    FilterMenuComponent,
+    ExploreComponent,
+    BuilderComponent,
+    FavoritesComponent,
+    ReportItineraryModalComponent,
+    CreateItineraryModalComponent,
+    CreateItineraryModalItemComponent,
+    DeleteItinerariesComponent,
+    NoVisualMapFiltersComponent,
+    SendToClientComponent,
+    BranchedItinerariesComponent,
+    ItineraryDetailComponent,
+    MapComponent,
+    SummaryComponent,
+    CommentSearchComponent,
+    DetailsComponent,
+    SendInviteComponent,
+    StoryComponent,
+    ItinerarySentInvitesComponent,
+    CommentsPageComponent,
+    NotificationsComponent,
+    HandleUpdateCommentRequestComponent,
+    ItineraryMembersComponent,
+    UserList,
+    ExistingMembersComponent,
+    AllPeopleComponent,
+    FriendRequestsComponent,
+    SendFriendRequestComponent,
+    ItineraryFriendsComponent,
+    ExistingFriendsComponent,
+    ListFriendUsersComponent,
+    CommentComparisonComponent,
+    FriendRequestsComponent,
+    CommentRepliesComponent,
+    CommentSingleComponent,
+    ItineraryUsersComponent,
+    ItineraryWatchingUsersComponent,
+    ItineraryUpvoteUsersComponent,
+    ItineraryAuthorHistoryComponent,
+    AdvancedFiltersComponent,
+    CreateItineraryComponent,
+    CreateItineraryStartLocationComponent,
+    CreateItineraryDestinationComponent,
+    SelectItineraryEventComponent,
+    ItineraryAddPlaceComponent,
+    ItineraryPlaceBasicInfoComponent,
+    ItineraryPlaceDateTimeComponent,
+    ItineraryPlaceMembersComponent,
+    CreateItineraryUserSearchComponent,
+    CreateItineraryMemberDetailsComponent,
+    LocationPickerComponent,
+    SuggestedEventsLocationComponent,
+    SuggestedEventsRouteTypeComponent,
+    SuggestedEventsRouteRadiusComponent,
+    CreatedItineraryComponent,
+    CreatedItineraryPreviewComponent,
+    CreatedItineraryDetailComponent,
+    CreatedItineraryMapComponent,
+    CreateItineraryHeaderComponent,
+    SharePopupComponent,
+    CreateItineraryDrawModeComponent,
+    CreateItineraryDrawPreviewComponent,
+    CreateItineraryNoVisualFilterComponent,
+    CreateItineraryNoVisualPreviewComponent,
+    AppHeaderDesktopComponent,
+    AppSidebarDesktopComponent,
+    NoVisualMapFiltersComponent
+  ],
+  exports: [FilterMenuComponent, DeleteItinerariesComponent, NoVisualMapFiltersComponent, SendToClientComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    ItinerariesRoutingModule,
+    SelectableModule,
+    ReactiveFormsModule,
+    InfoCardPlaceholderModule,
+    LibTabMenuModule,
+    ButtonsModule,
+    ToggleModule,
+    NgOptimizedImage,
+    SharedModule,
+    LibModalModule,
+    FormFieldModule,
+    DirectiveModule,
+    FormsModule,
+    TextBoxComponent,
+    LibPercentageBarModule,
+    DashedCheckboxModule,
+    TranslateModule,
+    SearchBarModule,
+    NotificationsModule,
+    LibToastrModule,
+    GoogleMapsModule,
+    InputFieldSelectModule,
+    GridModule,
+    SectionSeparatorComponent,
+    GridFiltersModule,
+    MatIcon,
+    DirectiveModule,
+    ImageDeckComponent,
+    LibToastrStackModule,
+    ProgressBarModule,
+    FooterSharedComponent,
+    RangeSelectorModule,
+    InputFieldModule,
+    UserMenuComponent,
+      LibMapModule.forRoot({
+      googleMapsKey: environment.identityPoolId,
+      googleMapsURL: environment.mapName, 
+    })
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [GoogleMap],
+})
+export class ItinerariesModule { }

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.css

@@ -0,0 +1,7 @@
+.bg-shadow {
+  text-shadow: 2px 2px 10px red;
+}
+
+.lib-icon {
+  height: 13px !important;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.html

@@ -0,0 +1,98 @@
+<app-header heading="Advanced Filters" (firstButton)="back()"></app-header>
+<div class="ps-5 pe-5">
+  <form [formGroup]="form" (ngSubmit)="submitForm()">
+    <p class="color-gray-1 mb-4">Create and apply custom advance filters or select popular preset advance filters.</p>
+    <p class="mb-3 text-white">Filters</p>
+    <!-- <lib-filter-bar [filters]="filtersss" [userFiltersList]="userFilterList" [standardFilters]="filtersss"
+            [showAllFilters]="true" (searchStringChange)="search($event)"
+            [activeFilter]="userFilterList[0]">
+        </lib-filter-bar> -->
+    <div class="flex items-center mb-2">
+      <lib-input-field type="text" label="Filter Name" style="width: calc(100% - 80px) ;" formControlName="filterName">
+      </lib-input-field>
+      <button class="flex row items-center gap-1 mt-2 ms-1 cursor-pointer font-purple text-nowrap" type="submit">
+        <span>
+          <img [ngSrc]="ICONS['plus']" height="14" width="15" alt="lib-icon" />
+        </span>
+        Add filter
+      </button>
+    </div>
+    <div class="flex gap-2">
+      <div class="w-[50%]">
+        <lib-input-field-select lib-input-field-select-component formControlName="filterField" optionLabel="name"
+          optionValue="value" label="Field" [options]="fields">
+        </lib-input-field-select>
+      </div>
+      <div class="w-[50%]">
+        <lib-input-field-select lib-input-field-select-component formControlName="filterCondition"
+          [options]="conditions" optionLabel="name" optionValue="value" label="Condition">
+        </lib-input-field-select>
+      </div>
+    </div>
+  </form>
+  <div>
+    <div class="flex row justify-between mt-5">
+      <div class="flex row gap-4">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="text-white">Best</p>
+      </div>
+      <div class="flex row gap-4">
+        <p>Default</p>
+        <img [src]="ICONS['eyePink']" alt="lib-icon">
+      </div>
+    </div>
+    <div class="flex row justify-between mt-5">
+      <div class="flex row gap-4">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="text-white">Hot</p>
+      </div>
+      <div class="flex row gap-4">
+        <p>Default</p>
+        <img [src]="ICONS['eyePink']" alt="lib-icon">
+      </div>
+    </div>
+    <div class="flex row justify-between mt-5">
+      <div class="flex row gap-4">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="text-white">Top</p>
+      </div>
+      <div class="flex row gap-4">
+        <p>Default</p>
+        <img [src]="ICONS['eyePink']" alt="lib-icon">
+      </div>
+    </div>
+    <div class="flex row justify-between mt-5">
+      <div class="flex row gap-4">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p>New</p>
+      </div>
+      <div class="flex row gap-4">
+        <p>Default</p>
+        <img [src]="ICONS['eyePinkClose']" alt="lib-icon">
+      </div>
+    </div>
+
+    <div *ngFor="let userFilter of userFilterList" class="flex row justify-between mt-5 items-center">
+      <div class="flex row gap-4">
+        <img [src]="ICONS['grid']" alt="lib-icon">
+        <p class="text-white text-nowrap" [ngStyle]="{ 'max-width': filterWidth + 'px' }">
+          <span class="truncate inline-block align-bottom" style="max-width: 4rem;">
+            {{ userFilter.name }}
+          </span>
+           |
+          {{ userFilter.sort?.field }}, {{ userFilter.sort?.direction == "Ascending" ? "Sort A-Z" : "Sort Z-A" }}</p>
+        <!-- <p class="text-white" [ngStyle]="{ 'max-width': filterWidth + 'px' }">{{ userFilter.name }} </p> -->
+      </div>
+      <div class="flex row gap-3">
+        <img [src]="ICONS['deletePink']" class="lib-icon">
+        <img [src]="ICONS['editPink']" class="lib-icon">
+        <img [src]="ICONS['eyePink']" class="lib-icon" (click)="setFilter(userFilter)">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="m-3">
+  <div class="w-100 center">
+    <lib-primary-btn>{{"ITINERARY.APPLY" | translate }}</lib-primary-btn>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/advanced-filters/advanced-filters.component.ts

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { FilterDataRequest, SelectOption } from '@naniteninja/ionic-lib';
+import { ICONS } from '../../../../_constants/constants';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Iicon } from '../../../../_interface/icon';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-advanced-filters',
+  templateUrl: './advanced-filters.component.html',
+  styleUrl: './advanced-filters.component.css'
+})
+export class AdvancedFiltersComponent implements OnInit {
+  form: FormGroup;
+  filterWidth: any;
+
+  constructor(private fb: FormBuilder, private location:Location) {
+    this.form = this.fb.group({
+      filterField: [null],
+      filterCondition: [this.conditions[0]?.value || null],
+      filterName: [""],
+    });
+  }
+
+  fields = [
+    { name: 'Name', value: '1' },
+    { name: 'Title', value: '2' },
+    { name: 'Upvote', value: '3' }
+  ];
+  conditions = [
+    { name: 'Sort A-Z', value: '1' },
+    { name: 'Sort Z-A', value: '2' }
+  ];
+
+  ICONS :Iicon = ICONS;
+
+  filtersss: SelectOption<number>[] = [
+    {
+      label: 'Hello',
+      value: 2,
+      selected: true,
+    },
+  ];
+
+  userFilterList: FilterDataRequest[] = [
+    {
+      name: 'Filter by Name Ascending',
+      projectGridFilterId: '123',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: 'Name',
+        direction: 'Ascending',
+      },
+      order: 1,
+    },
+    {
+      name: 'Filter by Department and Salary Descending',
+      projectGridFilterId: '456',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Department',
+          operatorType: 'Equals',
+          values: ['IT'],
+        },
+        {
+          publicFieldName: 'Salary',
+          operatorType: 'GreaterThan',
+          values: [50000],
+        },
+      ],
+      sort: {
+        field: 'Title',
+        direction: 'Descending',
+      },
+      order: 2,
+    },
+  ];
+
+  search(_e: string): void {
+    
+  }
+
+  getNameFromValue(value: string, array: { name: string; value: string }[]): string {
+    return array.find(item => item.value === value)?.name || '';
+  }
+  getValueFromName(name: string, array: { name: string; value: string }[]): string {
+    return array.find(item => item.name === name)?.value || '';
+  }
+
+  submitForm() {
+    const newUserFilter: FilterDataRequest = {
+      name: this.form?.value?.filterName ?? '',
+      projectGridFilterId: '123',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: this.getNameFromValue(this.form?.value?.filterField ?? '', this.fields),
+        direction: this.form?.value?.filterCondition == '1' ? 'Ascending' : 'Descending',
+      },
+      order: this.userFilterList.length,
+    };
+    this.userFilterList.push(newUserFilter);
+  }
+  setFilter(userFilter: FilterDataRequest): void {
+    this.form = this.fb.group({
+      filterField: [this.getValueFromName(userFilter.sort?.field ?? "", this.fields)],
+      filterCondition: [userFilter.sort?.direction == "Ascending" ? '1' : "2"],
+      filterName: [userFilter.name],
+    });
+  }
+  ngOnInit(): void {
+    this.filterWidth = window.screen.width - 130;
+  }
+  back() {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.html

@@ -0,0 +1,30 @@
+<div class="ps-5 pe-5">
+  <app-header
+    (firstButton)="back()"
+    [heading]="'BRANCHED.FORKED_ITINERARIES' | translate"
+  ></app-header>
+
+  <lib-secondary-btn >
+    <div class="flex items-center justify-center">
+      <img class="branchIcon me-1" [src]="ICONS['branchPink']" alt="icon" />
+      <span class="me-1">
+        {{ "BRANCHED.FORK_THE_ITINERARY" | translate }}
+      </span>
+    </div>
+  </lib-secondary-btn>
+
+  <app-filter-menu [ngStyle]="{ margin: '0px !important' }"></app-filter-menu>
+  <ng-container *ngFor="let t of temps">
+    <app-cutom-card
+      [libMenuItem]="libMenuItem"
+      [isDraft]="false"
+      [itineraryStarted]="true"
+      (TitleClicked)="navToDetail()"
+      (forkClicked)="navToBranchItinerary(t)"
+      (messageClicked)="navToComment()"
+      (userProfileClicked)="navToMoreDetail()"
+      (imageClicked)="navToStories()"
+      (eyeClicked)="navToWatching()"
+    ></app-cutom-card>
+  </ng-container>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.scss

@@ -0,0 +1,16 @@
+.builder-content {
+  width: 100%;
+}
+
+.second-comp {
+  margin-top: 10px !important;
+}
+
+.create-itinires-com {
+  width: 100%;
+}
+
+.branchIcon {
+  height: 50px !important;
+  width: 50px !important;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.spec.ts

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