{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-default",
  "framework": "angular",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-angular-gantt"
  ],
  "description": "Gantt chart sample displaying tasks, durations, dependencies, and project progress.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/gantt-default.md"
  },
  "files": [
    {
      "target": "src/components/gantt-default/overview.component.ts",
      "content": "import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GanttComponent, PdfExportProperties, GanttModule, DayMarkersService, SelectionService, ToolbarService, PdfExportService, ExcelExportService, SortService, FilterService, ResizeService, ColumnMenuService } from '@syncfusion/ej2-angular-gantt';\nimport { overviewData, editingResources } from '../data';\nimport { NgIf } from '@angular/common';\nimport { ButtonComponent, ButtonAllModule, ButtonModule } from '@syncfusion/ej2-angular-buttons';\nimport { SidebarComponent, SidebarAllModule } from '@syncfusion/ej2-angular-navigations';\nimport { SliderModule, SliderComponent, Placement, SliderAllModule } from '@syncfusion/ej2-angular-inputs';\nimport { MultiSelectAllModule, MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';\nimport { DropDownListComponent, DropDownListModule, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';\nimport { SwitchComponent, SwitchModule, SwitchAllModule } from '@syncfusion/ej2-angular-buttons';\nimport { SelectEventArgs, RemoveEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { extend } from '@syncfusion/ej2-base';\nimport { NumericTextBoxModule, NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';\nimport { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';\nimport { PdfColor } from \"@syncfusion/ej2-pdf-export\";\n\n@Component({\n  selector: 'ej2-ganttoverview',\n  templateUrl: 'overview.html',\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n  providers: [DayMarkersService, SelectionService, ToolbarService, PdfExportService, ExcelExportService, SortService, FilterService, ResizeService, ColumnMenuService],\n  imports: [ GanttModule, NgIf, ButtonModule, SidebarAllModule, SliderAllModule, MultiSelectAllModule, DropDownListAllModule, SwitchAllModule, NumericTextBoxAllModule]\n})\n\nexport class GanttOverviewComponent implements OnInit {\n  public data: object[] = [];\n  public resources: object[] = [];\n  public resourceFields: Record<string, any> = {};\n  public taskSettings: Record<string, any> = {};\n  public timelineSettings: Record<string, any> = {};\n  public gridLines = 'Both';\n  public labelSettings: Record<string, any> = {};\n  public eventMarkers: object[] = [];\n  public toolbar: object = [];\n  public splitterSettings: Record<string, any> = {};\n  @ViewChild('gantt')\n  public gantt!: GanttComponent;\n  public holidays: object[] = [];\n  public projectStartDate: Date = new Date();\n  public projectEndDate: Date = new Date();\n  public theme: any;\n  public style: any;\n  public currentTheme: any;\n  public statusStyleColor: any;\n  public priorityStyle: any;\n  public iconClass: any;\n  public priorityContentStyle: any;\n  public statusContentstyleColor: any;\n  public workWeek?: string[];\n  public dropDownData?: Object;\n  public dropDownFields?: Object;\n  public mode?: string;\n\n  @ViewChild('sidebar')\n  public sidebar!: SidebarComponent;\n\n  @ViewChild('slider')\n  public defaultObj?: SliderComponent;\n\n  @ViewChild('switch')\n  public switch?: SwitchComponent;\n\n  @ViewChild('WorkingDaysObj')\n  public WorkingDaysObj!: MultiSelectComponent;\n\n  @ViewChild('sample')\n  public listObj?: DropDownListComponent;\n\n  public sidebarToggle: boolean = false;\n  public isSideBar: boolean = false;\n\n  public ngOnInit(): void {\n    this.data = overviewData;\n    this.mode = 'CheckBox';\n    this.dropDownFields = { text: 'day', value: 'id' };\n    this.dropDownData = [{ id: 'Sunday', day: 'Sunday' },\n    { id: 'Monday', day: 'Monday' },\n    { id: 'Tuesday', day: 'Tuesday' },\n    { id: 'Wednesday', day: 'Wednesday' },\n    { id: 'Thursday', day: 'Thursday' },\n    { id: 'Friday', day: 'Friday' },\n    { id: 'Saturday', day: 'Saturday' }];\n    this.workWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];\n    this.taskSettings = {\n      id: 'TaskId',\n      name: 'TaskName',\n      startDate: 'StartDate',\n      endDate: 'EndDate',\n      duration: 'TimeLog',\n      progress: 'Progress',\n      constraintType: 'ConstraintType',\n      constraintDate: 'ConstraintDate',\n      dependency: 'Predecessor',\n      parentID: 'ParentID',\n      resourceInfo: 'resource'\n    };\n    this.resourceFields = {\n      id: 'resourceId',\n      name: 'resourceName'\n    };\n    this.toolbar = ['ExpandAll', 'CollapseAll', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport', 'PdfExport'];\n    this.timelineSettings = {\n      timelineUnitSize: 60,\n      showTooltip: true,\n      topTier: {\n        unit: 'Month',\n        format: 'MMM yyyy'\n      },\n      bottomTier: {\n        unit: 'Day',\n        count: 4,\n        format: 'dd'\n      }\n    };\n    this.gridLines = 'Both';\n    this.labelSettings = {\n      rightLabel: 'Assignee',\n      taskLabel: '${Progress}%'\n    };\n    this.eventMarkers = [\n      {\n        day: new Date('2025-03-13'),\n        cssClass: 'e-custom-event-marker',\n        label: 'Project Initiative'\n      },\n      {\n        day: new Date('2025-04-18'),\n        cssClass: 'e-custom-event-marker',\n        label: 'Requirement Gathering'\n      },\n      {\n        day: new Date('2025-05-30'),\n        cssClass: 'e-custom-event-marker',\n        label: 'Design Phase'\n      },\n      {\n        day: new Date('2025-11-25'),\n        cssClass: 'e-custom-event-marker',\n        label: 'Deployment'\n      }\n    ];\n    this.holidays = [\n      {\n        from: new Date(\"01/01/2025\"),\n        to: new Date(\"01/01/2025\"),\n        label: \"New Year holiday\",\n        cssClass: \"e-custom-holiday\"\n      },\n      {\n        from: new Date(\"12/25/2024\"),\n        to: new Date(\"12/26/2024\"),\n        label: \"Christmas holidays\",\n        cssClass: \"e-custom-holiday\"\n      }\n    ];\n    this.resources = editingResources;\n    this.splitterSettings = {\n      columnIndex: 4\n    };\n    this.projectStartDate = new Date('01/25/2025');\n    this.projectEndDate = new Date('01/30/2026');\n  }\n  load(): void {\n    let themeCollection: any = ['bootstrap5', 'bootstrap', 'bootstrap4', 'fluent', 'fabric', 'fusionnew', 'material3', 'material', 'highcontrast', 'tailwind', 'fluent2', 'tailwind3', 'bootstrap5.3'];\n    let theme = document.body.className.split(' ').find(function(cls) { return themeCollection.includes(cls); }) || '';\n    this.currentTheme = theme ? true : false;\n  }\n\n  Status(status: any) {\n    switch (status) {\n      case 'In Progress':\n        this.statusStyleColor = this.currentTheme ? '#006AA6' : '#34B6FF';\n        this.style = `display: flex; padding: 2px 10px; gap: 10px; width: 96px; height: 24px; border: solid 1px ${this.statusStyleColor}`;\n        break;\n      case 'Open':\n        this.style = 'display: flex; justify-content: center; gap: 10px; width: 96px; height: 24px; border: solid 1px red';\n        break;\n      case 'On Hold':\n        this.statusStyleColor = this.currentTheme ? '#766B7C' : '#CDCBD7';\n        this.style = `display: flex; justify-content: center; gap: 10px; width: 96px; height: 24px; border: solid 1px ${this.statusStyleColor}`;\n        break;\n      case 'Completed':\n        this.statusStyleColor = this.currentTheme ? '#00A653' : '#92FFC8';\n        this.style = `display: flex; padding: 2px 10px; gap: 10px; width: 96px; height: 24px; border: solid 1px ${this.statusStyleColor}`;\n        break;\n    }\n    return this.style;\n  }\n\n  StatusContent(status: any) {\n    switch (status) {\n      case 'In Progress':\n        this.statusContentstyleColor = this.currentTheme ? 'rgb(0, 106, 166)' : 'rgb(52, 182, 255)';\n        this.style = `width: 72px; height: 22px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: ${this.statusContentstyleColor}`;\n        break;\n      case 'Open':\n        this.style = 'width: 54px; height: 22px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 22px; text-align: center; color: rgb(255,0,0)';\n        break;\n      case 'On Hold':\n        this.statusContentstyleColor = this.currentTheme ? 'rgb(118, 107, 124)' : 'rgb(205, 203, 215)';\n        this.style = `width: 54px; height: 22px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 22px; text-align: center; color: ${this.statusContentstyleColor}`;\n        break;\n      case 'Completed':\n        this.statusContentstyleColor = this.currentTheme ? 'rgb(0, 166, 83)' : 'rgba(146, 255, 200)';\n        this.style = `width: 74px; height: 22px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: ${this.statusContentstyleColor}`;\n        break;\n      case 'High':\n        this.statusContentstyleColor = this.currentTheme ? 'rgb(243, 86, 32)' : 'rgb(255, 181, 184)';\n        this.style = `width: 31px; height: 22px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: ${this.statusContentstyleColor}`;\n        break;\n    }\n    return this.style;\n  }\n\n  PriorityIconStyle(priority: any) {\n    switch (priority) {\n      case 'Low':\n        this.priorityStyle = this.currentTheme ? '#00A653' : '#FDFF88';\n        this.style = `margin-top: 3px; color: ${this.priorityStyle} !important`;\n        break;\n      case 'Normal':\n        this.priorityStyle = this.currentTheme ? '#7100A6' : '#E3A9FF';\n        this.style = `margin-top: 3px; color: ${this.priorityStyle} !important`;\n        break;\n      case 'Critical':\n        this.priorityStyle = this.currentTheme ? '#FF3740' : '#FFB5B8';\n        this.style = `margin-top: 3px; color: ${this.priorityStyle} !important`;\n        break;\n      case 'High':\n        this.priorityStyle = this.currentTheme ? '#f35620' : '#FFB5B8';\n        this.style = `margin-top: 3px; color: ${this.priorityStyle} !important`;\n        break;\n    }\n    return this.style;\n  }\n\n  PriorityContent(priority: any) {\n    switch (priority) {\n      case 'Low':\n        this.priorityContentStyle = this.currentTheme ? 'rgb(0, 166, 83)' : 'rgb(253, 255, 136)';\n        this.style = `width: 28px; height: 22px; font-style: normal; font-size: 14px; margin-left: 3px; line-height: 20px; text-align: center; color: ${this.priorityContentStyle}`;\n        break;\n      case 'Normal':\n        this.priorityContentStyle = this.currentTheme ? 'rgb(113, 0, 166)' : 'rgb(227, 169, 255)';\n        this.style = `width: 28px; height: 22px; font-style: normal; margin-left: 3px; font-size: 14px; line-height: 20px; text-align: center; color: ${this.priorityContentStyle}`;\n        break;\n      case 'Critical':\n        this.priorityContentStyle = this.currentTheme ? 'rgb(255, 55, 64)' : 'rgb(255, 181, 184)';\n        this.style = `width: 48px; height: 22px; font-style: normal; font-size: 14px; margin-left: 3px; line-height: 20px; text-align: center; color: ${this.priorityContentStyle}`;\n        break;\n      case 'High':\n        this.priorityContentStyle = this.currentTheme ? 'rgb(235, 99, 67)' : 'rgb(255, 181, 184)';\n        this.style = `width: 31px; height: 22px; font-style: normal; font-size: 14px; margin-left: 3px; line-height: 20px; text-align: center; color: ${this.priorityContentStyle}`;\n        break;\n    }\n    return this.style;\n  }\n\n  PriorityIcon(priority: any) {\n    switch (priority) {\n      case 'Low':\n        this.iconClass = 'e-icons e-arrow-down e-icon-style';\n        break;\n      case 'Normal':\n        this.iconClass = 'e-icons e-arrow-right e-icon-style';\n        break;\n      case 'Critical':\n        this.iconClass = 'e-icons e-arrow-up e-icon-style';\n        break;\n      case 'High':\n        this.iconClass = 'e-icons e-arrow-up e-icon-style';\n        break;\n    }\n    return this.iconClass;\n  }\n\n  toolbarClick(args?: ClickEventArgs): void {    if (!args?.item?.id) {\n      return;\n    }    if (args.item.id === 'overviewSample_excelexport') {\n      this.gantt.excelExport();\n    }\n    else if (args.item.id === \"overviewSample_csvexport\") {\n      this.gantt.csvExport();\n    }\n    else if (args.item.id === \"overviewSample_pdfexport\") {\n      this.gantt.pdfExport();\n    }\n  }\n\n  public triggerSidebar(): void {\n    this.sidebarToggle = !this.sidebarToggle;\n    this.isSideBar = true;\n  }\n\n  public closeSidebar(): void {\n    this.sidebarToggle = false;\n    this.isSideBar = false;\n    this.sidebar.hide();\n  }\n\n  valueofSlider: number = 30;\n  min: number = 40;\n  max: number = 60;\n  step: number = 5;\n  ticks: Object = {\n    placement: 'Before',\n    largeStep: 10,\n    showSmallTicks: true\n  };\n  tooltip: Object = {\n    isVisible: true,\n    placement: 'Before',\n    showOn: \"Hover\"\n  };\n  sliderWidth = 190;\n  onChanged(args: any) {\n    this.gantt.rowHeight = args.value;\n  }\n\n  gridLinesChange(args: any) {\n    if (args.checked) {\n      this.gantt.gridLines = 'Both';\n    } else {\n      this.gantt.gridLines = 'Vertical';\n    }\n  }\n\n  tempEvents: any;\n  showEventMarkers(args: any) {\n    if (args.checked) {\n      this.gantt.eventMarkers = this.tempEvents;\n    } else {\n      this.tempEvents = this.gantt.eventMarkers;\n      this.gantt.eventMarkers = [];\n    }\n  }\n\n  dependencyChange(args: any) {\n    const ganttDependencyViewContainer = document.querySelector('.e-gantt-dependency-view-container');\n    if (args.checked) {\n      if (ganttDependencyViewContainer) {\n        (ganttDependencyViewContainer as HTMLElement).style.visibility = 'visible';\n      }\n    } else {\n      (ganttDependencyViewContainer as HTMLElement).style.visibility = 'hidden';\n    }\n  }\n\n  tempLabels: any;\n  taskLabelChange(args: any) {\n    if (args.checked) {\n      this.gantt.labelSettings.rightLabel = this.tempLabels;\n    } else {\n      this.tempLabels = this.gantt.labelSettings.rightLabel;\n      this.gantt.labelSettings.rightLabel = \" \";\n    }\n  }\n\n  select(args: SelectEventArgs): void {\n    let workingDays: string[] = [...(this.WorkingDaysObj.value as string[])]; // Create a copy of the array\n    workingDays.push(args.item.innerText); // Add the selected item\n    this.gantt.workWeek = workingDays; // Update gantt workWeek\n  }\n\n  remove(args: RemoveEventArgs): void {\n    let workingDays: string[] = [...(this.WorkingDaysObj.value as string[])]; // Create a copy of the array\n    const index = workingDays.indexOf(args.item.innerText); // Find index of item to remove\n    if (index !== -1) {\n        workingDays.splice(index, 1); // Remove the item\n        this.gantt.workWeek = workingDays; // Update gantt workWeek\n    }\n  }\n\n\n  public durationUnit: Object[] = [\n    { Id: 'hour', Text: 'Hour' },\n    { Id: 'day', Text: 'Day' },\n    { Id: 'week', Text: 'Week' }\n  ];\n  public durationFields: Object = { text: 'Text', value: 'Id' };\n  public durationValue: string = 'day';\n  public height: string = '220px';\n\n  changeDuration(args: any): void {\n    this.gantt.durationUnit = args.value;\n  }\n\n  onChangeUnit(args: any): void {\n    var width = args.value;\n    this.gantt.timelineSettings.timelineUnitSize = width;\n  }\n\n  public viewTypeData: any = [\n    { id: \"ResourceView\", Text: \"Resource View\" },\n    { id: \"ProjectView\", Text: \"Project View\" }\n  ];\n  public viewFields: any = { text: 'Text', value: 'id' };\n  typeChange(args: any) {\n    this.gantt.viewType = args.value;\n    if ((document.getElementsByClassName('checkeddependency')[0] as any).hidden !== true) {\n      (document.querySelectorAll('.e-switch')[2] as any).ej2_instances[0].checked = true;\n    }\n  }\n\n  public viewModeData: any = [\n    { ID: \"Default\", Text: \"Default\" },\n    { ID: \"Grid\", Text: \"Grid\" },\n    { ID: \"Chart\", Text: \"Chart\" },\n  ];\n  public modeFields: any = { value: 'ID', text: 'Text' };\n  modeChange(args: any) {\n    if (args.value === 'Grid') {\n      this.gantt.setSplitterPosition('100%', 'position');\n    }\n    else if (args.value === 'Chart') {\n      this.gantt.setSplitterPosition('0%', 'position');\n    }\n    else {\n      this.gantt.setSplitterPosition('50%', 'position');\n    }\n  } \n  pdfQueryCellInfo(args: any): void {\n    if (args.column.headerText === 'Assignee' && args.data.taskData.resourcesImage) {\n        args.image = { height: 30, width: 30, base64: args.data.taskData.resourcesImage};\n        args.value = `${args.data.Assignee}\\n${args.data.taskData.Department}`; \n    }\n\n    // Set font color for Status or Priority columns\n    if (args.column.field === 'Status' || args.column.field === 'Priority') {\n        const style = args.column.field === 'Status' ? this.StatusContent(args.value) : this.PriorityContent(args.value);\n        const rgbMatch = style.match(/rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)/);\n        if (rgbMatch) {\n            const rgbValues = rgbMatch[0].slice(4, -1).split(', ').map(Number);\n            args.style.fontColor = new PdfColor(rgbValues[0], rgbValues[1], rgbValues[2]);\n        }   \n    }\n  };\n  pdfQueryTaskbarInfo(args: any): void {\n    if (this.gantt.labelSettings.rightLabel && args.data.taskData.resourcesImage) {\n      args.labelSettings.rightLabel.image = [{ base64: args.data.taskData.resourcesImage, height: 25, width: 25 }];\n      args.labelSettings.rightLabel.value = args.data.ganttProperties.resourceNames;\n    }\n  }\n}\n"
    },
    {
      "target": "src/components/gantt-default/overview.html",
      "content": "\n<div class=\"control-section\">\n  <div id=\"gantt-sidebar-parent\">\n    <ng-container *ngIf=\"isSideBar\">\n      <ejs-sidebar #sidebar id=\"ganttsidebar\" isOpen=\"sidebarToggle\" width=\"282px\" type=\"Over\" position=\"Right\"\n        target=\"#sidebar-gantt\">\n        <div class=\"gantt-title-header\">\n          <div class=\"gantt-title\">Project Settings</div>\n          <span class=\"e-closed\" (click)=\"closeSidebar()\" style=\"cursor: pointer;font-size: 20px;\"></span>\n        </div>\n        <ul class=\"settings-list\" style=\"margin: 15px 15px; padding-left: 5px;\">\n          <label for=\"rowHeightSlider\" class=\"gantt-labels-style\">Row height :</label>\n          <li class=\"gantt-list-fields\"\n            style=\"padding: 20px; padding-bottom: 0px; margin-bottom: 0px;padding-top: 5px;\">\n            <div id=\"rowHeightSlider\">\n              <ejs-slider id=\"default\" #slider [value]=\"valueofSlider\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n                [ticks]=\"ticks\" [tooltip]=\"tooltip\" [width]=\"sliderWidth\" (change)=\"onChanged($event)\">\n              </ejs-slider>\n            </div>\n          </li>\n\n          <!-- grid lines -->\n          <li class=\"gantt-list-fields\">\n            <label for=\"showGridLines\" class=\"gantt-labels-style\">Show Grid Lines :</label>\n            <div class=\"gantt-switch\" style=\"margin-left: 20px;\">\n              <ejs-switch id=\"showGridLinesSwitch\" class=\"checked\" (change)=\"gridLinesChange($event)\">\n              </ejs-switch>\n            </div>\n          </li>\n\n          <!-- event markers -->\n          <li class=\"gantt-list-fields\">\n            <label for=\"showEventMarkers\" class=\"gantt-labels-style\">Show event markers :</label>\n            <div class=\"gantt-switch\" style=\"margin-left: 20px;\">\n              <ejs-switch id=\"showEventSwitch\" class=\"checked\" [checked]=\"true\" (change)=\"showEventMarkers($event)\">\n              </ejs-switch>\n            </div>\n          </li>\n\n          <!-- dependecny -->\n          <li class=\"gantt-list-fields\">\n            <label for=\"dependencyLines\" class=\"gantt-labels-style\">Show dependencies :</label>\n            <div class=\"gantt-switch\" style=\"margin-left: 20px;\">\n              <ejs-switch id=\"dependencyLines\" class=\"checkeddependency\" [checked]=\"true\"\n                (change)=\"dependencyChange($event)\">\n              </ejs-switch>\n            </div>\n          </li>\n\n          <!-- tasklabels -->\n          <li class=\"gantt-list-fields\">\n            <label for=\"taskLabelChange\" class=\"gantt-labels-style\">Show task labels :</label>\n            <div class=\"gantt-switch\" style=\"margin-left: 20px;\">\n              <ejs-switch id=\"taskLabelChange\" class=\"checked\" [checked]=\"true\" (change)=\"taskLabelChange($event)\">\n              </ejs-switch>\n            </div>\n          </li>\n\n          <li class=\"gantt-list-fields gantt-section-header\">\n            <label class=\"scheduling\">Scheduling Settings</label>\n          </li>\n\n          <!-- working days -->\n          <li class=\"gantt-list-field gantt-stack-container\">\n            <label for=\"workDays\" class=\"gantt-labels-style\">Working days :</label>\n            <div style=\"padding-left: 10px;\">\n              <ejs-multiselect id=\"checklist\" #WorkingDaysObj style=\"padding: 2px\" [dataSource]=\"dropDownData\"\n                (select)=\"select($event)\" (removed)=\"remove($event)\" [value]=\"workWeek\" [fields]=\"dropDownFields\"\n                [mode]=\"mode\" [showDropDownIcon]=\"true\" popupHeight=\"350px\"></ejs-multiselect>\n            </div>\n          </li>\n\n          <!-- duration unit -->\n          <li class=\"gantt-list-field gantt-stack-container\">\n            <label for=\"durationUnit\" class=\"gantt-labels-style\">Duration unit:</label>\n            <div style=\"padding-left: 10px;\">\n              <ejs-dropdownlist id=\"games\" #sample [dataSource]=\"durationUnit\" (change)=\"changeDuration($event)\"\n                [value]=\"durationValue\" [fields]=\"durationFields\" [popupHeight]=\"'220px'\">\n              </ejs-dropdownlist>\n            </div>\n          </li>\n\n          <!-- unit width -->\n          <li class=\"gantt-list-field gantt-stack-container\">\n            <label for=\"unitWidth\" class=\"gantt-labels-style\">Timeline width:</label>\n            <div style=\"padding-left: 10px;\">\n              <ejs-numerictextbox id=\"unitWidth\" [min]=\"10\" [value]=\"33\" (change)=\"onChangeUnit($event)\">\n              </ejs-numerictextbox>\n            </div>\n          </li>\n\n          <li class=\"gantt-list-fields gantt-section-header\">\n            <label class=\"scheduling\">View Settings</label>\n          </li>\n\n          <!-- view type -->\n          <li class=\"gantt-list-field gantt-stack-container\">\n            <label for=\"viewType\" class=\"gantt-labels-style\">View type:</label>\n            <div style=\"padding-left: 10px;\">\n              <ejs-dropdownlist id=\"viewType\" [dataSource]=\"viewTypeData\" [placeholder]=\"'View Type'\"\n                [fields]=\"viewFields\" (change)=\"typeChange($event)\">\n              </ejs-dropdownlist>\n            </div>\n          </li>\n\n          <!-- view  mode -->\n          <li class=\"gantt-list-field gantt-stack-container\">\n            <label for=\"viewMode\" class=\"gantt-labels-style\">View mode:</label>\n            <div style=\"padding-left: 10px;\">\n              <ejs-dropdownlist id=\"viewMode\" [dataSource]=\"viewModeData\" [placeholder]=\"'View'\" [fields]=\"modeFields\"\n                (change)=\"modeChange($event)\">\n              </ejs-dropdownlist>\n            </div>\n          </li>\n        </ul>\n      </ejs-sidebar>\n    </ng-container>\n  </div>\n\n  <div>\n    <div style=\"padding: 16px\">\n      <button ejs-button id=\"updatecell\" (click)=\"triggerSidebar()\" class=\"settings-button\">\n        <span class=\"e-settings-icon\"></span>\n        Settings\n      </button>\n    </div>\n    <div id='sidebar-gantt'>\n      <ejs-gantt id=\"overviewSample\" #gantt [dataSource]=\"data\" [taskFields]=\"taskSettings\"\n        [timelineSettings]=\"timelineSettings\" [labelSettings]=\"labelSettings\" [treeColumnIndex]=\"0\" height=\"650px\"\n        rowHeight=\"46\" taskbarHeight=\"25\" width=\"100%\" [allowResizing]=\"true\" [allowSelection]=\"true\" [enableWBS]=\"true\"\n        [enableAutoWbsUpdate]=\"true\" [highlightWeekends]=\"true\" [gridLines]=\"gridLines\" [allowExcelExport]=\"true\"\n        [allowPdfExport]=\"true\" (toolbarClick)=\"toolbarClick($event)\" showColumnMenu=\"true\" [enableHover]=\"true\"\n        [projectStartDate]=\"projectStartDate\" [projectEndDate]=\"projectEndDate\" [eventMarkers]=\"eventMarkers\"\n        [toolbar]=\"toolbar\" [allowFiltering]=\"true\" [resourceFields]=\"resourceFields\" [resources]=\"resources\"\n        [allowSorting]=\"true\" [allowResizing]=\"true\" [splitterSettings]=\"splitterSettings\" (load)=\"load()\"\n        (pdfQueryCellInfo)=\"pdfQueryCellInfo($event)\" (pdfQueryTaskbarInfo)=\"pdfQueryTaskbarInfo($event)\">\n\n        <e-columns>\n          <e-column field=\"WBSCode\" headerText=\"WBS ID\" width=\"110\"></e-column>\n          <e-column field=\"TaskName\" headerText=\"Product Release\" width=\"230\"></e-column>\n\n          <e-column field=\"Assignee\" headerText=\"Assignee\" [allowSorting]=\"false\" width=\"195\">\n            <ng-template #template let-data>\n              <div class=\"image\" *ngIf=\"data.ganttProperties.resourceNames\">\n                <img src=\"./assets/gantt/images/{{data.ganttProperties.resourceNames}}.png\"\n                  style=\"height:25px;width:25px\" />\n                <span>\n                  <div style=\"display:inline-block;position:relative;top:-2px; left:5px;font-size:13px\">{{data.taskData.Assignee}}\n                  </div>\n                  <div style=\" font-size: 9px; text-align:left; margin-left:31px\">{{data.taskData.Department}}</div>\n                </span>\n              </div>\n            </ng-template>\n          </e-column>\n\n          <e-column field=\"Status\" headerText=\"Status\" minWidth=\"100\" width=\"120\">\n            <ng-template #template let-data>\n              <div class=\"Status\" *ngIf=\"data.taskData.Status\">\n                <div [style]=\"Status(data.taskData.Status)\">\n                  <div [style]=\"StatusContent(data.taskData.Status)\">\n                    {{data.taskData.Status}}\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </e-column>\n\n          <e-column field=\"Priority\" headerText=\"Priority\" minWidth=\"80\" width=\"120\">\n            <ng-template #template let-data>\n              <div class=\"Priority\" *ngIf=\"data.taskData.Priority\">\n                <div style=\"display: flex;\">\n                  <div [class]=\"PriorityIcon(data.taskData.Priority)\"\n                    [style]=\"PriorityIconStyle(data.taskData.Priority)\">\n                    </div>\n                    <span [style]=\"PriorityContent(data.taskData.Priority)\">\n                      {{data.taskData.Priority}}\n                    </span>\n                  \n                </div>\n              </div>\n            </ng-template>\n          </e-column>\n\n          <e-column field=\"WBSPredecessor\" headerText=\"WBS Predecessor\" width=\"200\"></e-column>\n          <e-column field=\"ConstraintType\" headerText=\"Constraint Type\" width=\"180\"></e-column>\n          <e-column field=\"ConstraintDate\" headerText=\"Constraint Date\" width=\"180\"></e-column>\n          <e-column field=\"Progress\" headerText=\"Completion(%)\" width=\"170\"></e-column>\n          <e-column field=\"TimeLog\" headerText=\"Work Log\" width=\"140\"></e-column>\n        </e-columns>\n        \n        <ng-template #labelSettingsRightLabel let-data>\n          <div class=\"image\" *ngIf=\"data.ganttProperties.resourceNames\">\n            <img src=\"./assets/gantt/images/{{data.ganttProperties.resourceNames}}.png\"\n              style=\"height:25px;width:25px\" />\n            <span style=\"margin-left:2px ;\">\n              {{data.taskData.Assignee}}\n            </span>\n          </div>\n        </ng-template>\n\n      </ejs-gantt>\n    </div>\n  </div>\n\n\n  <style>\n    #overviewSample .e-gantt-child-taskbar,\n    #overviewSample .e-gantt-parent-taskbar {\n      border-radius: 10px;\n    }\n\n    #checklist .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-total {\n      width: auto !important;\n    }\n\n    .settings-button {\n      position: absolute;\n      top: 11px;\n      right: 14px;\n      z-index: 20;\n      padding: 5px;\n      display: flex;\n    }\n\n    .settings-button .e-settings-icon {\n      margin-right: 5px;\n    }\n\n    /* settings icon */\n    .e-settings-icon::before {\n      font-family: 'e-icons' !important;\n      content: '\\e880';\n      font-size: 15px;\n    }\n\n    /* cancel icon */\n    .e-closed::before {\n      font-family: 'e-icons' !important;\n      content: '\\e7e7';\n      font-size: 15px;\n    }\n\n    .highcontrast .e-closed::before {\n      content: '\\e7fc';\n      font-family: 'e-icons';\n      font-size: 15px;\n    }\n\n    .highcontrast .e-settings-icon::before {\n      content: '\\e679';\n      font-family: 'e-icons';\n    }\n\n    #ganttsidebar {\n      padding-left: 1px !important;\n      padding-right: 1px !important;\n    }\n\n    .gantt-title-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 20px;\n      width: 262px;\n      height: 57px;\n      color: #fff;\n      background-color: #56697f;\n      position: -webkit-sticky;\n      /* Safari */\n      position: sticky;\n      top: 0;\n      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n      z-index: 1000;\n    }\n\n    .gantt-title {\n      font-size: 20px;\n      font-weight: bold;\n    }\n\n    .content {\n      margin-top: 20px;\n    }\n\n    .gantt-list-fields {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n\n    .labels {\n      font-weight: 400;\n      font-size: 14px;\n      padding: 12px;\n    }\n\n    .scheduling {\n      color: #837c7c;\n      font-size: 16px !important;\n      height: inherit;\n      font-weight: 600;\n    }\n\n    .list-fields .vertical-align {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .gantt-section-header {\n      font-weight: 400;\n      font-size: 14px;\n      padding-left: 12px;\n      padding-top: 12px;\n      border-top: 1px solid #837c7c;\n      margin: 10px 0 5px 0;\n      /* Adjusted to reduce the gap */\n    }\n\n    .gantt-switch {\n      margin-bottom: 8px;\n    }\n\n    .gantt-list-field {\n      display: flex;\n      flex-direction: column;\n      margin-bottom: 10px;\n      width: 100%;\n    }\n\n    .gantt-stack-container {\n      display: flex;\n      flex-direction: column;\n      margin-bottom: 10px;\n    }\n\n    .gantt-labels-style {\n      font-weight: 400;\n      font-size: 14px;\n      margin-bottom: 5px;\n      text-align: left;\n      padding: 10px;\n      padding-left: 9px !important;\n    }\n\n    #overviewSample .e-tbar-btn-text {\n      display: none;\n    }\n  </style>\n</div>\n"
    }
  ]
}