).
*/
@@ -54,31 +77,84 @@ export class HorizontalScroll {
}, 50);
}
+ @Watch('taskListScrollNumber')
+ listScrollLeft() {
+ clearTimeout(this.timeoutId);
+ this.timeoutId = setTimeout(() => {
+ this.setTaskListScrollLeft();
+ }, 50);
+ }
+
private setScrollLeft() {
if (this.rootElement) {
- this.rootElement.shadowRoot.querySelector('div').scrollLeft =
- this.scrollNumber;
+ const shadowElement =
+ this.rootElement.shadowRoot.querySelector('div');
+ const element =
+ shadowElement.children.length == 2
+ ? shadowElement.children[1]
+ : shadowElement.children[0];
+ element && (element.scrollLeft = this.scrollNumber);
+ }
+ }
+
+ private setTaskListScrollLeft() {
+ if (this.rootElement) {
+ const shadowElement = this.rootElement.shadowRoot.querySelector('div');
+ const taskListScrollBar = shadowElement.children.length == 2 ? shadowElement.children[0] : null;
+ taskListScrollBar && (taskListScrollBar.scrollLeft = this.taskListScrollNumber);
}
}
render() {
const w =
- this.taskListTrueRef?.getBoundingClientRect().width + 24 * 1.5 ?? 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
-
+ this.taskListTrueRef?.getBoundingClientRect().width + 24 * 1.5 ?? 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
+
+ const width = +this.listCellWidth.replace('px', '');
+
return (
-
+
+
+
);
}
}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md
index 21eff1d6aa..4e4d6bb08b 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md
@@ -7,14 +7,19 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | ----------------- | ----------- | -------------------------- | ----------- |
-| `horizontalScroll` | -- | | `(event: UIEvent) => void` | `undefined` |
-| `rtl` | `rtl` | | `boolean` | `undefined` |
-| `scrollNumber` | `scroll-number` | | `number` | `undefined` |
-| `svgWidth` | `svg-width` | | `number` | `undefined` |
-| `taskListTrueRef` | -- | | `HTMLKupTaskListElement` | `undefined` |
-| `taskListWidth` | `task-list-width` | | `number` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------------------- | ------------------------- | ----------- | -------------------------- | ----------- |
+| `horizontalScroll` | -- | | `(event: UIEvent) => void` | `undefined` |
+| `horizontalTaskListScroll` | -- | | `(event: UIEvent) => void` | `undefined` |
+| `listCellWidth` | `list-cell-width` | | `string` | `'300px'` |
+| `rtl` | `rtl` | | `boolean` | `undefined` |
+| `scrollNumber` | `scroll-number` | | `number` | `undefined` |
+| `scrollableTaskList` | `scrollable-task-list` | | `boolean` | `false` |
+| `svgWidth` | `svg-width` | | `number` | `undefined` |
+| `taskListScrollNumber` | `task-list-scroll-number` | | `number` | `undefined` |
+| `taskListScrollWidth` | `task-list-scroll-width` | | `number` | `undefined` |
+| `taskListTrueRef` | -- | | `HTMLKupTaskListElement` | `undefined` |
+| `taskListWidth` | `task-list-width` | | `number` | `undefined` |
## Dependencies
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer-helper.ts b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer-helper.ts
index 133d38da00..031b11a593 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer-helper.ts
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer-helper.ts
@@ -76,19 +76,19 @@ export const isDetail = (
export const mergeTaskIntoProjects = (
projects: KupPlannerGanttTask[],
- { id, start, end }: KupPlannerTask
+ { id, start, end, startHour, endHour }: KupPlannerTask
): KupPlannerGanttTask[] =>
projects.map((project) =>
- project.id === id ? withNewDates(project, start, end) : project
+ project.id === id ? withNewDates(project, start, end, startHour, endHour) : project
);
export const mergeTaskIntoPhases = (
phases: KupPlannerPhaseGantt[] | undefined,
- { id, start, end }: KupPlannerTask
+ { id, start, end, startHour, endHour }: KupPlannerTask
): KupPlannerPhaseGantt[] | undefined => {
if (phases) {
return phases.map((phase) =>
- phase.id === id ? withNewDates(phase, start, end) : phase
+ phase.id === id ? withNewDates(phase, start, end, startHour, endHour) : phase
);
}
return undefined;
@@ -139,6 +139,10 @@ export const convertProjectToTasks = (
isDisabled: false,
hideChildren: false,
icon: row.icon,
+ startHour: item.startHour,
+ endHour: item.endHour,
+ secondaryStartHour: item.secondaryStartHour,
+ secondaryEndHour: item.secondaryEndHour
};
const children1 = (row.phases ?? []).map(convertPhaseToTask);
return [mainTask, ...children1];
@@ -168,6 +172,10 @@ export const convertPhaseToTask = (item: KupPlannerPhase): KupPlannerTask => {
selectedColor,
dependencies,
icon,
+ startHour,
+ endHour,
+ secondaryStartHour,
+ secondaryEndHour,
}: KupPlannerPhase): KupPlannerTask => {
const kupDates: KupDates = new KupDates();
const { start, end } = kupDates.validDates(
@@ -203,6 +211,10 @@ export const convertPhaseToTask = (item: KupPlannerPhase): KupPlannerTask => {
}
: {},
icon,
+ startHour,
+ endHour,
+ secondaryStartHour,
+ secondaryEndHour,
};
};
@@ -278,12 +290,14 @@ const convertDetailToTimeline = (
const withNewDates = (
p: P,
start: Date,
- end: Date
+ end: Date,
+ startHour: string,
+ endHour: string
): P => {
const kupDates: KupDates = new KupDates();
const startDate = kupDates.formatToIsoDate(start);
const endDate = kupDates.formatToIsoDate(end);
- const extra = { startDate, endDate };
+ const extra = { startDate, endDate, startHour, endHour };
return { ...p, ...extra };
};
@@ -340,6 +354,10 @@ export const ganttDateRangeFromGanttTask = (
end: Date;
secondaryStart?: Date;
secondaryEnd?: Date;
+ startHour?: string,
+ endHour?: string,
+ secondaryStartHour?: string,
+ secondaryEndHour?: string
}[] = [];
const kupDates: KupDates = new KupDates();
tasks.forEach((item) => {
@@ -348,6 +366,10 @@ export const ganttDateRangeFromGanttTask = (
end: kupDates.parseToDayEnd(item.endDate),
secondaryStart: kupDates.parseToDayStart(item.secondaryStartDate),
secondaryEnd: kupDates.parseToDayEnd(item.secondaryEndDate),
+ startHour: item.startHour,
+ endHour: item.endHour,
+ secondaryStartHour: item.secondaryStartHour,
+ secondaryEndHour: item.secondaryEndHour
});
item.phases?.forEach((phase) => {
dates.push({
@@ -357,6 +379,10 @@ export const ganttDateRangeFromGanttTask = (
phase.secondaryStartDate
),
secondaryEnd: kupDates.parseToDayEnd(phase.secondaryEndDate),
+ startHour: item.startHour,
+ endHour: item.endHour,
+ secondaryStartHour: item.secondaryStartHour,
+ secondaryEndHour: item.secondaryEndHour
});
});
});
@@ -375,6 +401,10 @@ export const ganttDateRangeGeneric = (
end: Date;
secondaryStart?: Date;
secondaryEnd?: Date;
+ startHour?: string,
+ endHour?: string,
+ secondaryStartHour?: string,
+ secondaryEndHour?: string
}[],
viewMode: KupPlannerViewMode,
preStepsCount: number,
@@ -431,6 +461,32 @@ export const ganttDateRangeGeneric = (
newEndDate = startOfDate(newEndDate, 'day');
newEndDate = addToDate(newEndDate, 19, 'day');
break;
+ case 'hour':
+ newStartDate = startOfDate(newStartDate, "hour");
+ newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+ newEndDate = startOfDate(newEndDate, "day");
+ newEndDate = addToDate(newEndDate, 1, "day");
+ break;
+ /*
+ case ViewMode.QuarterDay:
+ newStartDate = startOfDate(newStartDate, "day");
+ newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+ newEndDate = startOfDate(newEndDate, "day");
+ newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
+ break;
+ case ViewMode.HalfDay:
+ newStartDate = startOfDate(newStartDate, "day");
+ newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+ newEndDate = startOfDate(newEndDate, "day");
+ newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
+ break;
+ case ViewMode.Hour:
+ newStartDate = startOfDate(newStartDate, "hour");
+ newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+ newEndDate = startOfDate(newEndDate, "day");
+ newEndDate = addToDate(newEndDate, 1, "day");
+ break;
+ */
}
return [newStartDate, newEndDate];
};
@@ -446,6 +502,10 @@ export const ganttDateRangeFromDetail = (
end: Date;
secondaryStart?: Date;
secondaryEnd?: Date;
+ startHour?: string,
+ endHour?: string,
+ secondaryStartHour?: string,
+ secondaryEndHour?: string
}[] = [];
const kupDates: KupDates = new KupDates();
details.forEach((item) => {
@@ -537,6 +597,10 @@ export const ganttDateRangeFromTask = (
end: Date;
secondaryStart?: Date;
secondaryEnd?: Date;
+ startHour?: string,
+ endHour?: string,
+ secondaryStartHour?: string,
+ secondaryEndHour?: string
}[] = [];
tasks.forEach((item) => {
@@ -545,6 +609,10 @@ export const ganttDateRangeFromTask = (
end: item.end,
secondaryStart: item.secondaryStart,
secondaryEnd: item.secondaryEnd,
+ startHour:item.startHour,
+ endHour: item.endHour,
+ secondaryStartHour: item.secondaryStartHour,
+ secondaryEndHour: item.secondaryEndHour
});
});
if (mainGanttStartDate && mainGanttEndDate) {
@@ -584,6 +652,9 @@ export const seedDates = (
case 'day':
currentDate = addToDate(currentDate, 1, 'day');
break;
+ case 'hour':
+ currentDate = addToDate(currentDate, 1, "hour");
+ break;
/*
case ViewMode.HalfDay:
currentDate = addToDate(currentDate, 12, "hour");
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
index fc6dcc6dca..68e68d544e 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-planner-renderer.tsx
@@ -166,7 +166,7 @@ export class KupPlannerRenderer {
this.timeUnit = this.props?.viewMode;
this.currentTasks = this.props?.mainGantt.items || [];
this.currentDetails = this.props?.secondaryGantt?.items;
- this.scrollX = this.props?.mainGantt?.initialScrollX || -1;
+ this.scrollX = this.props?.mainGantt?.initialScrollX ?? -1;
this.mainGanttDoubleView =
this.props?.mainGantt?.showSecondaryDates ?? false;
this.displayedDates = calculateDisplayedDateRange(
@@ -330,6 +330,50 @@ export class KupPlannerRenderer {
setTimeout(this.getScrollX, 500);
}
+ // Handle phase drop
+ handlePhaseDrop(
+ originalPhaseData: KupPlannerGanttTaskN,
+ // originalTaskData: KupPlannerGanttTaskN | KupPlannerItemDetail,
+ finalPhaseData: KupPlannerTask,
+ destinationData: KupPlannerGanttTaskN | KupPlannerItemDetail,
+ onPhaseDrop: any
+ ) {
+ // Invoke callback
+
+ let row = undefined;
+
+ const currentProjects = this.currentTasks as KupPlannerGanttTask[];
+
+ const parentOfClickedPhase: KupPlannerGanttTaskN | undefined = (
+ currentProjects as KupPlannerGanttTaskN[]
+ ).find((p) => p.phases?.some((ph) => ph?.id === finalPhaseData.id));
+ if (parentOfClickedPhase) {
+ const phases = mergeTaskIntoPhases(
+ parentOfClickedPhase.phases,
+ finalPhaseData
+ );
+ const updatedProjects = (
+ currentProjects as KupPlannerGanttTaskN[]
+ ).map((p) =>
+ p.id === parentOfClickedPhase.id ? { ...p, phases } : p
+ );
+ row = getPhaseById(finalPhaseData.id, updatedProjects);
+ }
+
+ delete row?.['taskRow'];
+ onPhaseDrop?.({
+ originalPhaseData,
+ // originalTaskData,
+ finalPhaseData: row,
+ destinationData,
+ });
+
+ // to move the phase back to its original position
+ this.currentTasks = JSON.parse(JSON.stringify(this.currentTasks));
+ // Use setTimeout to ensure DOM updates
+ setTimeout(this.getScrollX, 500);
+ }
+
// Get scrollX
getScrollX() {
if (this.rootElement) {
@@ -475,6 +519,37 @@ export class KupPlannerRenderer {
label={this.props.mainGantt.title}
doubleView={this.mainGanttDoubleView ?? false}
setDoubleView={this.handleSetDoubleView.bind(this)}
+ scrollableTaskList={this.props.scrollableTaskList}
+ phaseDrop={(
+ originalPhaseData,
+ originalTaskData,
+ finalPhaseData,
+ destinationData
+ ) => {
+ const originalPhase = getPhaseById(
+ originalPhaseData.id,
+ this.currentTasks
+ );
+ const originalTask = getProjectById(
+ originalTaskData.id,
+ this.currentTasks
+ );
+ const finalPhase = getPhaseById(
+ finalPhaseData.id,
+ this.currentTasks
+ );
+ const destinationTask = getProjectById(
+ destinationData.id,
+ this.currentTasks
+ );
+ this.handlePhaseDrop(
+ originalPhase,
+ // originalTask,
+ finalPhaseData,
+ destinationTask,
+ this.props.mainGantt.onPhaseDrop
+ );
+ }}
/>
{this.props.secondaryGantt && (
)}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
index 76af7e5b34..9213fbef5a 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
@@ -2,31 +2,32 @@
display: grid;
grid-auto-flow: column;
grid-gap: 8px;
- margin-left: 12px;
width: max-content;
+ margin-bottom: var(--kup-space-05);
+ margin-left: var(--kup-space-04);
}
.button {
- background: transparent;
- border-color: var(--kup-primary-color, #003b77);
- border-radius: 4px;
- border-width: 1px;
- box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2),
- 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14),
- 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);
+ background-color: var(--kup-gray-color-70);
+ border: none;
+ text-align: left;
box-sizing: border-box;
- color: var(--kup-primary-color, #003b77);
+ color: var(--kup-gray-color-0);
cursor: pointer;
- font-size: 11px;
- height: 32px;
- min-width: 64px;
+ padding: var(--kup-space-03) var(--kup-space-05);
+ &:hover {
+ background-color: var(--kup-gray-color-90);
+ }
+ &:focus{
+ background-color: var(--kup-primary-color-60);
+ }
}
.label {
- font-family: var(--kup-font-family, inherit);
- font-size: 11px;
- letter-spacing: 0.0892857143em;
text-decoration: none;
- text-transform: uppercase;
- padding: 0 6px;
+ @include kup-body-compact-01;
+}
+
+.buttonActive {
+ background-color: var(--kup-primary-color-60);
}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.tsx
index 63004f3da7..56a0eed0d4 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.tsx
@@ -1,5 +1,9 @@
-import { Component, h, Prop } from '@stencil/core';
-import { KupPlannerSwitcherProps } from '../../kup-planner-declarations';
+import { Component, h, Prop, State } from '@stencil/core';
+import {
+ KupPlannerSwitcherProps,
+ KupPlannerViewMode,
+} from '../../kup-planner-declarations';
+
@Component({
tag: 'kup-switcher',
styleUrl: 'kup-switcher.scss',
@@ -9,29 +13,43 @@ export class KupSwitcher {
/*-------------------------------------------------*/
/* P r o p s */
/*-------------------------------------------------*/
+ @Prop() timeUnitChange: KupPlannerSwitcherProps['onTimeUnitChange'];
- @Prop()
- timeUnitChange: KupPlannerSwitcherProps['onTimeUnitChange'];
+ /*-------------------------------------------------*/
+ /* S t a t e s */
+ /*-------------------------------------------------*/
+ @State() activeButton: KupPlannerViewMode = 'day'; // Impostato su 'day' inizialmente
+
+ private buttonLabels: KupPlannerViewMode[] = [
+ 'hour',
+ 'day',
+ 'week',
+ 'month',
+ 'year',
+ ];
render() {
- const day = () => this.timeUnitChange('day');
- const week = () => this.timeUnitChange('week');
- const month = () => this.timeUnitChange('month');
- const year = () => this.timeUnitChange('year');
+ const handleButtonClick = (mode: KupPlannerViewMode) => {
+ this.activeButton = mode;
+ this.timeUnitChange(mode);
+ };
+
return (
-
-
-
-
+ {this.buttonLabels.map((label) => (
+
+ ))}
);
}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/kup-task-gantt.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/kup-task-gantt.tsx
index 3da6c3e37d..304104d767 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/kup-task-gantt.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/kup-task-gantt.tsx
@@ -30,6 +30,9 @@ export class TaskGantt {
@Prop({ mutable: true })
scrollX: KupPlannerTaskGanttProps['scrollX'];
+ @Prop()
+ phaseDragScroll: (scrollY: number) => void;
+
/**
* References the root HTML element of the component ().
*/
@@ -74,7 +77,7 @@ export class TaskGantt {
}
render() {
- const newBarProps = { ...this.barProps, gridProps: this.gridProps };
+ const newBarProps = { ...this.barProps, gridProps: this.gridProps, phaseDragScroll: this.phaseDragScroll };
return (
void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption` | `undefined` |
-| `calendarProps` | -- | | `{ dateSetup: KupPlannerDateSetup; locale: string; viewMode: KupPlannerViewMode; rtl: boolean; headerHeight: number; columnWidth: number; fontFamily: string; fontSize: string; dateTimeFormatters?: KupPlannerDateTimeFormatters; singleLineHeader: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; }` | `undefined` |
-| `ganttHeight` | `gantt-height` | | `number` | `undefined` |
-| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` |
-| `scrollX` | `scroll-x` | | `number` | `undefined` |
-| `scrollY` | `scroll-y` | | `number` | `undefined` |
-| `taskGanttRef` | -- | | `HTMLDivElement` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `barProps` | -- | | `{ tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption` | `undefined` |
+| `calendarProps` | -- | | `{ dateSetup: KupPlannerDateSetup; locale: string; viewMode: KupPlannerViewMode; rtl: boolean; headerHeight: number; columnWidth: number; fontFamily: string; fontSize: string; dateTimeFormatters?: KupPlannerDateTimeFormatters; singleLineHeader: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; }` | `undefined` |
+| `ganttHeight` | `gantt-height` | | `number` | `undefined` |
+| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` |
+| `phaseDragScroll` | -- | | `(scrollY: number) => void` | `undefined` |
+| `scrollX` | `scroll-x` | | `number` | `undefined` |
+| `scrollY` | `scroll-y` | | `number` | `undefined` |
+| `taskGanttRef` | -- | | `HTMLDivElement` | `undefined` |
## Dependencies
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.tsx
index 86e031cb1d..a6f4d670e9 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.tsx
@@ -17,6 +17,7 @@ import { getPhaseById, getProjectById } from '../kup-planner-renderer-helper';
shadow: false,
})
export class TaskList {
+
/*-------------------------------------------------*/
/* P r o p s */
/*-------------------------------------------------*/
@@ -71,6 +72,15 @@ export class TaskList {
@Prop()
doubleView?: boolean;
+ @Prop()
+ scrollableTaskList?: boolean;
+
+ @Prop()
+ updateTaskListScrollX: boolean = false;
+
+ @Prop()
+ taskListScrollX: number;
+
@Prop()
setDoubleView?: (checked: boolean) => void;
@@ -102,6 +112,9 @@ export class TaskList {
@Prop()
expanderClick: KupPlannerTaskListProps['expanderClick'];
+ @Prop()
+ ontaskListScrollWidth: (width: number) => void;
+
/**
* References the root HTML element of the component (
).
*/
@@ -165,6 +178,7 @@ export class TaskList {
tasks: this.tasks,
locale: this.locale,
selectedTaskId: this.selectedTaskId,
+ scrollableTaskList: this.scrollableTaskList,
setSelectedTask: this.setSelectedTask.bind(this),
onExpanderClick: this.expanderClick,
};
@@ -192,7 +206,7 @@ export class TaskList {
/>
)}
{
+ this.ontaskListScrollWidth(width)
+ }}
+ taskListScrollX={this.taskListScrollX}
ganttId={KUP_PLANNER_MAIN_GANTT_ID}
/>
)}
diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index 938375bb9a..cd93272629 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -52,9 +52,7 @@ export const FImage: FunctionalComponent
= (
return (
-1) {
let themeIcon: string = props.resource.replace('--', '');
diff --git a/packages/ketchup/src/image-list.html b/packages/ketchup/src/image-list.html
index e93f7b7ceb..7c2f42effe 100644
--- a/packages/ketchup/src/image-list.html
+++ b/packages/ketchup/src/image-list.html
@@ -27,5 +27,11 @@
+