react-timelane 0.0.1 → 0.0.3

package/dist/components/Timelane.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { TimelaneLane } from './TimelaneLane/TimelaneLane';
+import { TimelaneBody } from './TimelaneBody';
+import { TimelaneLayout } from './TimelaneLayout/TimelaneLayout';
+import { TimelaneHeader } from './TimelaneHeader/TimelaneHeader';
+import { TimelaneBackground } from './TimelaneBackground';
+import { TimelaneAside } from './TimelaneAside';
+export declare function Timelane({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace Timelane {
+    var Container: typeof Timelane;
+    var Header: typeof TimelaneHeader;
+    var Body: typeof TimelaneBody;
+    var Background: typeof TimelaneBackground;
+    var Aside: typeof TimelaneAside;
+    var Lane: typeof TimelaneLane;
+    var Layout: typeof TimelaneLayout;
+}

package/dist/components/TimelaneAside.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent, ReactElement } from 'react';
+import { Lane } from '../types';
+interface TimelaneAsideProps {
+    lanes: Lane[];
+    focusedLane?: Lane | null;
+    setFocusedLane?: (lane: Lane | null) => void;
+    onLaneHeaderClick?: (lane: Lane, e: MouseEvent) => void;
+    onLaneHeaderDoubleClick?: (lane: Lane, e: MouseEvent) => void;
+    onLaneHeaderContextMenu?: (lane: Lane, e: MouseEvent) => void;
+    renderLaneHeader?: (lane: Lane) => ReactElement;
+}
+export declare function TimelaneAside({ lanes, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelaneBackground.d.ts

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

package/dist/components/TimelaneBody.d.ts

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

package/dist/components/TimelaneBodyInner.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactElement } from 'react';
+import { AvailableSpace, Item, Lane } from '../types';
+interface TimelaneBodyInnerProps<T> {
+    lanes: Lane[];
+    items: Item<T>[];
+    renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
+    onItemUpdate?: (item: Item<T>) => void;
+    onLaneClick?: (lane: Lane, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneDoubleClick?: (lane: Lane, when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
+    onLaneContextMenu?: (lane: Lane, when: Date, e: MouseEvent) => void;
+}
+/**
+ * @deprecated The component should not be used
+ */
+export declare function TimelaneBodyInner<T>({ lanes, items, renderItem, onItemUpdate, onLaneClick, onLaneDoubleClick, onLaneContextMenu, }: TimelaneBodyInnerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{TimelineHeader/TimelineHeader.d.ts → TimelaneHeader/TimelaneHeader.d.ts}

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

package/dist/components/{TimelineHeader → TimelaneHeader}/index.d.ts

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

package/dist/components/{core/CoreItem → TimelaneItem}/DragResizeComponent.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { Position, Rectangle, Dimensions, CoreItem } from '../../../types';
+import { Position, Rectangle, Dimensions, Item } from '../../types';
 interface DragResizeComponentProps<T> {
-    item: CoreItem<T>;
+    item: Item<T>;
     rectangle: Rectangle;
     boundingRectangle: Dimensions;
     onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;

package/dist/components/TimelaneItem/TimelaneItem.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { Item, Position, Lane, TimelaneSettings } from '../../types';
+interface TimelaneItemProps<T> {
+    item: Item<T>;
+    lane: Lane;
+    settings: TimelaneSettings;
+    onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+    onDrop: () => void;
+    onDrag: () => void;
+    onUpdate: (updatedItem: Item<T>) => void;
+    onResizeStart: () => void;
+}
+export default function TimelaneItem<T>({ lane, item, settings, children, onDragStart, onDrag, onDrop, onUpdate, onResizeStart, }: PropsWithChildren<TimelaneItemProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{core/CoreSwimlane → TimelaneLane}/AvailableSpaceIndicator.d.ts

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from 'react';
-import { CoreItem, Pixels, SwimlaneT, TimeRange } from '../../../types';
+import { Item, Pixels, Lane, TimeRange } from '../../types';
 interface AvailableSpaceIndicatorProps<T> {
     pixels: Pixels;
     range: TimeRange;
-    swimlane: SwimlaneT;
+    swimlane: Lane;
     debug: boolean;
-    items: CoreItem<T>[];
+    items: Item<T>[];
 }
 /**
  * A component that displays the available space at the mouse cursor position.

package/dist/components/{core/CoreSwimlane → TimelaneLane}/DropTarget.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { GrabInfo, Position } from '../../../types';
+import { GrabInfo, Position } from '../../types';
 interface DropTargetProps {
     onDragStart?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
     onDrag?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;

package/dist/components/{core/CoreSwimlane → TimelaneLane}/OverlapIndicator.d.ts

@@ -1,4 +1,4 @@
-import { Rectangle } from '../../../types';
+import { Rectangle } from '../../types';
 interface OverlapIndicatorProps {
     overlap: Rectangle;
 }

package/dist/components/{core/CoreSwimlane/CoreSwimlane.d.ts → TimelaneLane/TimelaneLane.d.ts}

@@ -1,16 +1,16 @@
 import { MouseEvent, ReactElement } from 'react';
-import { AvailableSpace, CoreItem, SwimlaneT } from '../../../types';
-interface CoreSwimlaneProps<T> {
-    swimlane: SwimlaneT;
-    items: CoreItem<T>[];
+import { AvailableSpace, Item, Lane } from '../../types';
+interface TimelaneLaneProps<T> {
+    swimlane: Lane;
+    items: Item<T>[];
     focused?: boolean;
-    onItemUpdate?: (item: CoreItem<T>) => void;
+    onItemUpdate?: (item: Item<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;
+    renderItem?: (item: Item<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 declare function TimelaneLane<T>({ swimlane, items, focused, onItemUpdate, onMouseUp, onClick, onDoubleClick, onContextMenu, renderItem, onResizeStart, }: TimelaneLaneProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TimelaneLayout/TimelaneLayout.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+export declare function TimelaneLayout({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TimelaneLayout {
+    var Header: typeof TimelaneLayoutHeader;
+    var Body: typeof TimelaneLayoutBody;
+    var Background: typeof TimelaneLayoutBackground;
+    var Footer: typeof TimelaneLayoutFooter;
+    var Aside: typeof TimelaneLayoutAside;
+    var Corner: typeof TimelaneLayoutCorner;
+}
+declare function TimelaneLayoutHeader({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelaneLayoutBackground({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelaneLayoutBody({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+declare function TimelaneLayoutFooter({ children }: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+interface TimelaneLayoutAsideProps {
+    side?: "left" | "right";
+}
+declare function TimelaneLayoutAside({ side, children, }: PropsWithChildren<TimelaneLayoutAsideProps>): import("react/jsx-runtime").JSX.Element;
+interface TimelaneLayoutCornerProps {
+    corner?: "top left" | "top right" | "bottom left" | "bottom right";
+}
+declare function TimelaneLayoutCorner({ corner, children, }: PropsWithChildren<TimelaneLayoutCornerProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelaneSelectionLayer.d.ts

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

package/dist/components/TimelaneSettingsContext.d.ts

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

package/dist/components/TimelaneSettingsProvider.d.ts

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

package/dist/components/{TimelineWrapper.d.ts → TimelaneWrapper.d.ts}

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-import { SwimlaneT } from '../types';
-interface TimelineWrapperProps {
+import { Lane } from '../types';
+interface TimelaneWrapperProps {
     focusedDay?: Date | null;
-    focusedSwimlane?: SwimlaneT | null;
+    focusedSwimlane?: Lane | null;
     start?: Date;
     end?: Date;
     pixelsPerDay?: number;
@@ -13,5 +13,8 @@ interface TimelineWrapperProps {
     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;
+/**
+ * @deprecated The component should not be used
+ */
+export default function TimelaneWrapper({ children, start, end, pixelsPerDay, pixelsPerResource, showMonths, showWeeks, showDays, allowOverlaps, focusedDate, }: PropsWithChildren<TimelaneWrapperProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/utils.d.ts

@@ -0,0 +1,27 @@
+import { DragLocationHistory, ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
+import { Item, Dimensions, Pixels, Position, Rectangle, Lane, TimeRange, AvailableSpace, GrabInfo, Grid } from '../types';
+export declare function getDropTargetDimensions(lane: Lane, pixels: Pixels, range: TimeRange): Dimensions;
+export declare function getDropTargetHeight(lane: Lane, pixels: Pixels): number;
+export declare function getDropTargetWidth(lane: Lane, pixels: Pixels, range: TimeRange): number;
+export declare function getItemRectangle<T>(item: Item<T>, lane: Lane, range: TimeRange, pixels: Pixels): Rectangle;
+export declare function getItemDimensions<T>(item: Item<T>, lane: Lane, 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: Item<T>, lane: Lane, start: Date, pixels: Pixels): Position;
+export declare function getGrabPosition(source: ElementDragPayload, location: DragLocationHistory): {
+    absolute: Position;
+    relative: Position;
+};
+export declare function getUpdatedItem<T>(oldItem: Item<T>, swimlane: Lane, dropPreviewRect: Rectangle, pixels: Pixels, range: TimeRange): Item<T>;
+export declare function getDropPreviewRectangle<S, T>(swimlane: Lane, items: Item<T>[], item: Item<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 a
+ * @param b
+ * @returns
+ */
+export declare function doOverlap(a: Rectangle, b: Rectangle): boolean;
+export declare function getOverlap(a: Rectangle, b: Rectangle): Rectangle | null;
+export declare function itemsDoOverlap<T>(a: Item<T>, b: Item<T>): boolean;
+export declare function isWithinTargetDimensions(item: Rectangle, targetDimensions: Dimensions): boolean;
+export declare function getAvailableSpace<T>(clickedDate: Date, clickedOffset: number, swimlane: Lane, items: Item<T>[], range: TimeRange): AvailableSpace | null;

package/dist/hooks/useScroll.d.ts

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

package/dist/hooks/useTimelaneContext.d.ts

@@ -0,0 +1 @@
+export declare const useTimelaneContext: () => import('../components/TimelaneSettingsContext').TimelaneContextOuter;

package/dist/index.d.ts

@@ -1,13 +1,12 @@
-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 { TimelaneLayout } from './components/TimelaneLayout/TimelaneLayout';
+export { TimelaneAside } from './components/TimelaneAside';
+export { TimelaneBackground } from './components/TimelaneBackground';
+export { TimelaneLane } from './components/TimelaneLane/TimelaneLane';
+export { TimelaneBody } from './components/TimelaneBody';
+export { Timelane } from './components/Timelane';
+export { TimelaneSettingsProvider } from './components/TimelaneSettingsProvider';
+export * from './components/TimelaneHeader';
 export * from './types';
-export * from './components/core/utils';
-export * from './components/core/CoreSwimlane/utils';
+export * from './components/utils';
 export { useScroll } from './hooks/useScroll';
-export { useTimelineContext } from './hooks/useTimelineContext';
+export { useTimelaneContext } from './hooks/useTimelaneContext';

package/dist/react-timelane.css

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