react-timelane 0.0.0 → 0.0.1

package/dist/components/TimelineAside.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent, ReactElement } from 'react';
+import { SwimlaneT } from '../types';
+interface TimelineAsideProps {
+    swimlanes: SwimlaneT[];
+    focusedSwimlane?: SwimlaneT | null;
+    setFocusedSwimlane?: (lane: SwimlaneT | null) => void;
+    onSwimlaneHeaderClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+    onSwimlaneHeaderDoubleClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+    onSwimlaneHeaderContextMenu?: (lane: SwimlaneT, e: MouseEvent) => void;
+    renderSwimlaneHeader?: (lane: SwimlaneT) => ReactElement;
+}
+export default function TimelineAside({ swimlanes, focusedSwimlane, setFocusedSwimlane, onSwimlaneHeaderClick, onSwimlaneHeaderDoubleClick, onSwimlaneHeaderContextMenu, renderSwimlaneHeader, }: TimelineAsideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineBackground.d.ts

@@ -0,0 +1,5 @@
+interface TimelineBackgroundProps {
+    focusedDay?: Date | null;
+}
+export default function TimelineBackground({ focusedDay, }: TimelineBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineBody.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent, ReactElement } from 'react';
+import { AvailableSpace, CoreItem, SwimlaneT } from '../types';
+interface TimelineBodyProps<T> {
+    lanes: SwimlaneT[];
+    items: CoreItem<T>[];
+    renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
+    onItemUpdate?: (item: CoreItem<T>) => void;
+    onLaneClick?: (lane: SwimlaneT, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneDoubleClick?: (lane: SwimlaneT, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneContextMenu?: (lane: SwimlaneT, when: Date, e: MouseEvent) => void;
+}
+export declare function TimelineBody<T>({ lanes, items, renderItem, onItemUpdate, onLaneClick, onLaneDoubleClick, onLaneContextMenu, }: TimelineBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineHeader/DaysHeader.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+import { Pixels, TimeRange } from '../../types';
+interface DaysHeaderProps {
+    range: TimeRange;
+    pixels: Pixels;
+    focusedDay?: Date | null;
+    setFocusedDay?: (day: Date | null) => void;
+    render?: (day: Date) => ReactElement;
+    onDayClick?: (_: {
+        day: Date;
+        e: MouseEvent;
+    }) => void;
+}
+export declare function DaysHeader({ range, pixels, focusedDay, setFocusedDay, render, onDayClick, }: DaysHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineHeader/MonthsHeader.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+import { Pixels, TimeRange } from '../../types';
+interface MonthsHeaderProps {
+    range: TimeRange;
+    pixels: Pixels;
+    setFocusedDay?: (day: Date | null) => void;
+    render?: (firstDay: Date, lastDay: Date) => ReactElement;
+    onMonthClick?: (params: {
+        firstDay: Date;
+        lastDay: Date;
+        e: MouseEvent;
+    }) => void;
+}
+export declare function MonthsHeader({ range, pixels, setFocusedDay, render, onMonthClick, }: MonthsHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineHeader/TimelineHeader.d.ts

@@ -0,0 +1,24 @@
+import { MouseEvent, ReactElement } from 'react';
+interface TimelineHeaderProps {
+    focusedDay?: Date | null;
+    setFocusedDay?: (day: Date | null) => void;
+    renderMonthHeader?: (firstDay: Date, lastDay: Date) => ReactElement;
+    renderWeekHeader?: (firstDay: Date, lastDay: Date) => ReactElement;
+    renderDayHeader?: (day: Date) => ReactElement;
+    onMonthClick?: (_: {
+        firstDay: Date;
+        lastDay: Date;
+        e: MouseEvent;
+    }) => void;
+    onWeekClick?: (_: {
+        firstDay: Date;
+        lastDay: Date;
+        e: MouseEvent;
+    }) => void;
+    onDayClick?: (_: {
+        day: Date;
+        e: MouseEvent;
+    }) => void;
+}
+export declare function TimelineHeader({ focusedDay, setFocusedDay, renderMonthHeader, renderWeekHeader, renderDayHeader, onMonthClick, onDayClick, onWeekClick, }: TimelineHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineHeader/WeeksHeader.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+import { Pixels, TimeRange } from '../../types';
+interface WeeksHeaderProps {
+    range: TimeRange;
+    pixels: Pixels;
+    setFocusedDay?: (day: Date | null) => void;
+    render?: (firstDay: Date, lastDay: Date) => ReactElement;
+    onWeekClick?: (params: {
+        firstDay: Date;
+        lastDay: Date;
+        e: MouseEvent;
+    }) => void;
+}
+export declare function WeeksHeader({ range, pixels, setFocusedDay, render, onWeekClick, }: WeeksHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineHeader/index.d.ts

@@ -0,0 +1,5 @@
+export { DaysHeader } from './DaysHeader';
+export { WeeksHeader } from './WeeksHeader';
+export { MonthsHeader } from './MonthsHeader';
+export { TimelineHeader } from './TimelineHeader';
+export { renderDayHeader, renderMonthHeader, renderWeekHeader, } from './renderingUtils';

package/dist/components/TimelineHeader/renderingUtils.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+export declare function renderMonthHeader(firstDay: Date, lastDay: Date): ReactElement;
+export declare function renderWeekHeader(firstDay: Date, lastDay: Date): ReactElement;
+export declare function renderDayHeader(day: Date): ReactElement;

package/dist/components/TimelineSelectionLayer.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+interface TimelineSelectionLayerProps {
+    onSelect: (selection: number[]) => void;
+}
+export declare function TimelineSelectionLayer({ children, onSelect, }: PropsWithChildren<TimelineSelectionLayerProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineSettingsContext.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+import { TimelineSettings } from '../types/TimelineSettings';
+export interface TimelineContextOuter {
+    settings: TimelineSettings;
+    setSettings: Dispatch<SetStateAction<TimelineSettings>>;
+}
+export declare const TimelineSettingsContext: import('react').Context<TimelineContextOuter>;

package/dist/components/TimelineSettingsProvider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { TimelineSettings } from '../types/TimelineSettings';
+interface TimelineSettingsProviderProps {
+    settings: TimelineSettings;
+}
+export declare const TimelineSettingsProvider: ({ settings: _settings, children, }: PropsWithChildren<TimelineSettingsProviderProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelineWrapper.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { SwimlaneT } from '../types';
+interface TimelineWrapperProps {
+    focusedDay?: Date | null;
+    focusedSwimlane?: SwimlaneT | null;
+    start?: Date;
+    end?: Date;
+    pixelsPerDay?: number;
+    pixelsPerResource?: number;
+    showMonths?: boolean;
+    showWeeks?: boolean;
+    showDays?: boolean;
+    allowOverlaps?: boolean;
+    focusedDate?: Date | null;
+}
+export default function TimelineWrapper({ children, start, end, pixelsPerDay, pixelsPerResource, showMonths, showWeeks, showDays, allowOverlaps, focusedDate, }: PropsWithChildren<TimelineWrapperProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreItem/CoreItemComponent.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { CoreItem, Position, SwimlaneT, TimelineSettings } from '../../../types';
+interface CoreItemComponentProps<T> {
+    item: CoreItem<T>;
+    swimlane: SwimlaneT;
+    settings: TimelineSettings;
+    onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+    onDrop: () => void;
+    onDrag: () => void;
+    onUpdate: (updatedItem: CoreItem<T>) => void;
+    onResizeStart: () => void;
+}
+export default function CoreItemComponent<T>({ swimlane, item, settings, children, onDragStart, onDrag, onDrop, onUpdate, onResizeStart, }: PropsWithChildren<CoreItemComponentProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreItem/DragResizeComponent.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { Position, Rectangle, Dimensions, CoreItem } from '../../../types';
+interface DragResizeComponentProps<T> {
+    item: CoreItem<T>;
+    rectangle: Rectangle;
+    boundingRectangle: Dimensions;
+    onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+    onDrag: () => void;
+    onDrop: () => void;
+    onUpdate: (rectangle: Rectangle) => void;
+    onResizeStart: () => void;
+}
+/**
+ * takes care of pixel-level drag-and-drop and resizing.
+ * will emit every event through event handlers.
+ * @param param0 t
+ * @returns
+ */
+export default function DragResizeComponent<T>({ item, rectangle, boundingRectangle, children, onDrag, onDragStart, onDrop, onUpdate, onResizeStart, }: PropsWithChildren<DragResizeComponentProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/AvailableSpaceIndicator.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { CoreItem, Pixels, SwimlaneT, TimeRange } from '../../../types';
+interface AvailableSpaceIndicatorProps<T> {
+    pixels: Pixels;
+    range: TimeRange;
+    swimlane: SwimlaneT;
+    debug: boolean;
+    items: CoreItem<T>[];
+}
+/**
+ * A component that displays the available space at the mouse cursor position.
+ * The available space is a rectangle that does not overlap with it's surrounding items.
+ * It is determined by some heuristics.
+ *
+ * Only used for debugging purposes.
+ *
+ * @param param0
+ * @returns
+ */
+export default function AvailableSpaceIndicator<T>({ pixels, range, swimlane, items, debug, children, }: PropsWithChildren<AvailableSpaceIndicatorProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/CoreSwimlane.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactElement } from 'react';
+import { AvailableSpace, CoreItem, SwimlaneT } from '../../../types';
+interface CoreSwimlaneProps<T> {
+    swimlane: SwimlaneT;
+    items: CoreItem<T>[];
+    focused?: boolean;
+    onItemUpdate?: (item: CoreItem<T>) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onClick?: (when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onDoubleClick?: (when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onContextMenu?: (when: Date, e: MouseEvent) => void;
+    renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
+    onResizeStart?: (data: T) => void;
+}
+export default function CoreSwimlane<T>({ swimlane, items, focused, onItemUpdate, onMouseUp, onClick, onDoubleClick, onContextMenu, renderItem, onResizeStart, }: CoreSwimlaneProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/DropPreview.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface DropPreviewProps {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export default function DropPreview({ x, y, width, height, children, }: PropsWithChildren<DropPreviewProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/DropTarget.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { GrabInfo, Position } from '../../../types';
+interface DropTargetProps {
+    onDragStart?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+    onDrag?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+    onDrop?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+    onDragEnter?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+    onDragLeave?: (grabInfo: GrabInfo, data: any) => void;
+}
+export default function DropTarget({ children, onDragStart, onDrag, onDrop, onDragEnter, onDragLeave, }: PropsWithChildren<DropTargetProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/OverlapIndicator.d.ts

@@ -0,0 +1,6 @@
+import { Rectangle } from '../../../types';
+interface OverlapIndicatorProps {
+    overlap: Rectangle;
+}
+export default function OverlapIndicator({ overlap }: OverlapIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/core/CoreSwimlane/utils.d.ts

@@ -0,0 +1,13 @@
+import { AvailableSpace, CoreItem, Dimensions, GrabInfo, Grid, Pixels, Position, Rectangle, SwimlaneT, TimeRange } from '../../../types';
+export declare function getDropPreviewRectangle<S, T>(swimlane: SwimlaneT, items: CoreItem<T>[], item: CoreItem<S>, mousePosition: Position | null, grabInfo: GrabInfo, pixels: Pixels, grid: Grid, range: TimeRange, allowOverlaps: boolean): Rectangle | null;
+/**
+ * Returns true if two rectangles (l1, r1) and (l2, r2) overlap
+ * @param el1
+ * @param el2
+ * @returns
+ */
+export declare function doOverlap(el1: Rectangle, el2: Rectangle): boolean;
+export declare function getOverlap(rect1: Rectangle, rect2: Rectangle): Rectangle | null;
+export declare function itemsDoOverlap<T>(a: CoreItem<T>, b: CoreItem<T>): boolean;
+export declare function isWithinTargetDimensions(item: Rectangle, targetDimensions: Dimensions): boolean;
+export declare function getAvailableSpace<T>(clickedDate: Date, clickedOffset: number, swimlane: SwimlaneT, items: CoreItem<T>[], range: TimeRange): AvailableSpace | null;

package/dist/components/core/utils.d.ts

@@ -0,0 +1,15 @@
+import { DragLocationHistory, ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
+import { CoreItem, Dimensions, Pixels, Position, Rectangle, SwimlaneT, TimeRange } from '../../types';
+export declare function getDropTargetDimensions(swimlane: SwimlaneT, pixels: Pixels, range: TimeRange): Dimensions;
+export declare function getDropTargetHeight(swimlane: SwimlaneT, pixels: Pixels): number;
+export declare function getDropTargetWidth(swimlane: SwimlaneT, pixels: Pixels, range: TimeRange): number;
+export declare function getItemRectangle<T>(item: CoreItem<T>, swimlane: SwimlaneT, range: TimeRange, pixels: Pixels): Rectangle;
+export declare function getItemDimensions<T>(item: CoreItem<T>, swimlane: SwimlaneT, pixels: Pixels): Dimensions;
+export declare function dateToPixel(date: Date, start: Date, pixels: Pixels): number;
+export declare function offsetToPixel(offset: number, capacity: number, pixels: Pixels): number;
+export declare function getItemPosition<T>(item: CoreItem<T>, swimlane: SwimlaneT, start: Date, pixels: Pixels): Position;
+export declare function getGrabPosition(source: ElementDragPayload, location: DragLocationHistory): {
+    absolute: Position;
+    relative: Position;
+};
+export declare function getUpdatedItem<T>(oldItem: CoreItem<T>, swimlane: SwimlaneT, dropPreviewRect: Rectangle, pixels: Pixels, range: TimeRange): CoreItem<T>;

package/dist/components/layout/TimelineLayout.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+declare function TimelineLayout({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare namespace TimelineLayout {
+    var Header: typeof TimelineLayoutHeader;
+    var Body: typeof TimelineLayoutBody;
+    var Background: typeof TimelineLayoutBackground;
+    var Footer: typeof TimelineLayoutFooter;
+    var Aside: typeof TimelineLayoutAside;
+    var Corner: typeof TimelineLayoutCorner;
+}
+declare function TimelineLayoutHeader({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelineLayoutBackground({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelineLayoutBody({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelineLayoutFooter({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+interface TimelineLayoutAsideProps {
+    side?: "left" | "right";
+}
+declare function TimelineLayoutAside({ side, children, }: PropsWithChildren<TimelineLayoutAsideProps>): import("react/jsx-runtime").JSX.Element;
+interface TimelineLayoutCornerProps {
+    corner?: "top left" | "top right" | "bottom left" | "bottom right";
+}
+declare function TimelineLayoutCorner({ corner, children, }: PropsWithChildren<TimelineLayoutCornerProps>): import("react/jsx-runtime").JSX.Element;
+export default TimelineLayout;

package/dist/hooks/useScroll.d.ts

@@ -0,0 +1,10 @@
+import { ItemId, SwimlaneId } from '../types';
+export declare const useScroll: () => {
+    scrollTo: (destination: {
+        horz?: Date;
+        vert?: SwimlaneId;
+    } | ItemId) => void;
+    scrollToDate: (date: Date) => void;
+    scrollToItem: (itemId: ItemId) => void;
+    scrollToLane: (laneId: SwimlaneId) => void;
+};

package/dist/hooks/useTimelineContext.d.ts

@@ -0,0 +1 @@
+export declare const useTimelineContext: () => import('../components/TimelineSettingsContext').TimelineContextOuter;

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { default as TimelineLayout } from './components/layout/TimelineLayout';
+export { default as TimelineAside } from './components/TimelineAside';
+export { default as TimelineBackground } from './components/TimelineBackground';
+export * from './components/TimelineHeader';
+export { default as TimelineWrapper } from './components/TimelineWrapper';
+export { default as CoreSwimlane } from './components/core/CoreSwimlane/CoreSwimlane';
+export { TimelineBody } from './components/TimelineBody';
+export { TimelineSelectionLayer } from './components/TimelineSelectionLayer';
+export * from './types';
+export * from './components/core/utils';
+export * from './components/core/CoreSwimlane/utils';
+export { useScroll } from './hooks/useScroll';
+export { useTimelineContext } from './hooks/useTimelineContext';

package/dist/react-timelane.css

@@ -0,0 +1 @@
+.timeline-layout{position:relative;width:100%;height:100%;overflow:auto}.timeline-layout .timeline-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timeline-layout .timeline-layout-inner .timeline-layout-header,.timeline-layout .timeline-layout-inner .timeline-layout-footer,.timeline-layout .timeline-layout-inner .timeline-layout-aside,.timeline-layout .timeline-layout-inner .timeline-layout-corner{background:#fff}.timeline-layout .timeline-layout-inner .timeline-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101;overflow:hidden}.timeline-layout .timeline-layout-inner .timeline-layout-body{grid-area:body;z-index:100}.timeline-layout .timeline-layout-inner .timeline-layout-background{grid-area:body;z-index:-1}.timeline-layout .timeline-layout-inner .timeline-layout-footer{grid-area:footer;position:sticky;position:-webkit-sticky;bottom:0;z-index:101;border-top:1px solid lightgray}.timeline-layout .timeline-layout-inner .timeline-layout-aside{grid-area:aside-l;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timeline-layout .timeline-layout-inner .timeline-layout-aside.timeline-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:1px solid lightgray}.timeline-layout .timeline-layout-inner .timeline-layout-corner{position:sticky;position:-webkit-sticky;z-index:102}.timeline-layout .timeline-layout-inner .timeline-layout-corner.timeline-layout-corner-top-left{grid-area:corner-tl;top:0;left:0;border-bottom:1px solid lightgray;border-right:1px solid lightgray}.timeline-layout .timeline-layout-inner .timeline-layout-corner.timeline-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timeline-layout .timeline-layout-inner .timeline-layout-corner.timeline-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timeline-layout .timeline-layout-inner .timeline-layout-corner.timeline-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timeline{--timeline-aside-width: 150px;--timeline-border-color-light: #f0f0f0;--timeline-border-color-normal: lightgray;--timeline-border-color-dark: gray;--timeline-highlight-color: #f8f8f8;--timeline-focused-color: rgba(0, 0, 255, .1);--timeline-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border-left:1px solid var(--timeline-border-color-normal)}.timeline .timeline-header{top:0;z-index:101;background:#fff}.timeline .timeline-header .timeline-header-months{display:flex;flex-flow:row nowrap}.timeline .timeline-header .timeline-header-months .timeline-header-month-label{border-right:1px solid var(--timeline-border-color-normal);border-bottom:1px solid var(--timeline-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timeline .timeline-header .timeline-header-months .timeline-header-month-label:hover{background:var(--timeline-hover-color)}.timeline .timeline-header .timeline-header-weeks{display:flex;flex-flow:row nowrap}.timeline .timeline-header .timeline-header-weeks .timeline-header-week-label{border-right:1px solid var(--timeline-border-color-normal);border-bottom:1px solid var(--timeline-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timeline .timeline-header .timeline-header-weeks .timeline-header-week-label:hover{background:var(--timeline-hover-color)}.timeline .timeline-header .timeline-header-days{display:flex;flex-flow:row nowrap}.timeline .timeline-header .timeline-header-days .timeline-header-day-label{border-right:1px solid var(--timeline-border-color-normal);border-bottom:1px solid var(--timeline-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timeline .timeline-header .timeline-header-days .timeline-header-day-label:hover{background:var(--timeline-hover-color)}.timeline .timeline-header .timeline-header-days .timeline-header-day-label.timeline-header-day-label-focused{background:var(--timeline-focused-color)}.timeline .timeline-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timeline-border-color-normal);border-bottom:1px solid var(--timeline-border-color-normal)}.timeline .timeline-body{z-index:99;position:relative;width:fit-content}.timeline .timeline-body .timeline-swimlane{border-color:var(--timeline-border-color-normal)!important;border-top:1px solid gray;border-bottom:1px solid gray;margin-top:-1px;overflow:hidden}.timeline .timeline-body .timeline-swimlane .timeline-drop-target{position:relative;width:100%;height:100%}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item.timeline-item-marked .timeline-allocation{border:2px dashed rgba(0,0,0,.5)}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-item-drag-handle{height:100%}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-item-resize-handle{background:#bed7dc;border-radius:5px;top:4px!important;bottom:4px!important;height:auto!important;width:6px!important;z-index:2;background:transparent!important;transition:.2s}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-item-resize-handle:hover{background:#0000001a!important}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-item-resize-handle.timeline-item-resize-handle-left{left:0!important;margin-left:1px}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-item-resize-handle.timeline-item-resize-handle-right{right:0!important}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-allocation{background:#92a8d1;border-radius:2px;border:2px solid transparent;height:calc(100% - 1px);overflow:hidden;cursor:pointer;padding:0 4px;margin-left:1px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timeline-allocation}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-allocation .timeline-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timeline-allocation (max-height: 30px){.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-allocation .timeline-allocation-title{margin:0}}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item .timeline-allocation.timeline-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-item.dragging{opacity:0}.timeline .timeline-body .timeline-swimlane .timeline-drop-target .timeline-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timeline .timeline-body .timeline-swimlane.timeline-row-focused{background:var(--timeline-focused-color)}.timeline .timeline-aside{border-right:1px solid var(--timeline-border-color-normal);width:var(--timeline-aside-width);background:#fff}.timeline .timeline-aside .timeline-aside-swimlane-header{border:1px solid var(--timeline-border-color-normal);border-right:none;border-left:none;margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timeline .timeline-aside .timeline-aside-swimlane-header.timeline-aside-swimlane-header-focused{background:var(--timeline-focused-color)}.timeline .timeline-aside .timeline-aside-swimlane-header:hover .timeline-aside-resource-menu{opacity:1}.timeline .timeline-aside .timeline-aside-swimlane-header .timeline-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timeline .timeline-aside .timeline-aside-swimlane-header .timeline-aside-resource-menu.timeline-aside-resource-menu-open{opacity:1}.timeline .timeline-background{position:relative;width:100%;height:100%}.timeline .timeline-background .timeline-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timeline .timeline-background .timeline-background-inner .timeline-background-day-label{border-right:1px solid var(--timeline-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timeline .timeline-background .timeline-background-inner .timeline-background-day-label.timeline-background-day-label-sunday{border-right:1px solid var(--timeline-border-color-normal)}.timeline .timeline-background .timeline-background-inner .timeline-background-day-label.timeline-background-day-label-focused{background:var(--timeline-focused-color)}.timeline .timeline-background .timeline-background-inner .timeline-background-focused-day-position{position:absolute;height:100%;background:var(--timeline-focused-color);z-index:-101}.timeline-header-tooltip,.timeline-header-day-tooltip{font-size:2em}