react-timelane 0.0.0 → 0.0.2

package/dist/components/Timelane.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { CoreSwimlane, TimelaneBody, TimelaneLayout } from '..';
+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 CoreSwimlane;
+    var Layout: typeof TimelaneLayout;
+}

package/dist/components/TimelaneAside.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent, ReactElement } from 'react';
+import { SwimlaneT } from '../types';
+interface TimelaneAsideProps {
+    lanes: SwimlaneT[];
+    focusedLane?: SwimlaneT | null;
+    setFocusedLane?: (lane: SwimlaneT | null) => void;
+    onLaneHeaderClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+    onLaneHeaderDoubleClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+    onLaneHeaderContextMenu?: (lane: SwimlaneT, e: MouseEvent) => void;
+    renderLaneHeader?: (lane: SwimlaneT) => 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, CoreItem, SwimlaneT } from '../types';
+interface TimelaneBodyInnerProps<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;
+}
+/**
+ * @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/TimelaneHeader/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/TimelaneHeader/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/TimelaneHeader/TimelaneHeader.d.ts

@@ -0,0 +1,24 @@
+import { MouseEvent, ReactElement } from 'react';
+interface TimelaneHeaderProps {
+    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 TimelaneHeader({ focusedDay, setFocusedDay, renderMonthHeader, renderWeekHeader, renderDayHeader, onMonthClick, onDayClick, onWeekClick, }: TimelaneHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TimelaneHeader/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/TimelaneHeader/index.d.ts

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

package/dist/components/TimelaneHeader/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/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/TimelaneSettings';
+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/TimelaneWrapper.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { SwimlaneT } from '../types';
+interface TimelaneWrapperProps {
+    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;
+}
+/**
+ * @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/core/CoreItem/CoreItemComponent.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { CoreItem, Position, SwimlaneT, TimelaneSettings } from '../../../types';
+interface CoreItemComponentProps<T> {
+    item: CoreItem<T>;
+    swimlane: SwimlaneT;
+    settings: TimelaneSettings;
+    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 declare 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/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/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/useTimelaneContext.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { TimelaneLayout } from './components/layout/TimelaneLayout';
+export { TimelaneAside } from './components/TimelaneAside';
+export { TimelaneBackground } from './components/TimelaneBackground';
+export { CoreSwimlane } from './components/core/CoreSwimlane/CoreSwimlane';
+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 { useScroll } from './hooks/useScroll';
+export { useTimelaneContext } from './hooks/useTimelaneContext';

package/dist/react-timelane.css

@@ -0,0 +1 @@
+.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}