funda-ui 4.3.555 → 4.4.15

package/EventCalendarTimeline/index.css

@@ -25,6 +25,7 @@
   --e-cal-timeline-header-prevnext-btn-radius: 0.25rem;
   --e-cal-timeline-footer-today-btn-bg: rgba(0, 58, 166, 1);
   --e-cal-timeline-footer-today-btn-color: #fff;
+  --e-cal-timeline-appearance-btn-active-bg: rgb(239, 239, 239);
   position: relative;
   z-index: 3;
   min-width: var(--e-cal-timeline-wrapper-min-width);
@@ -32,6 +33,7 @@
   /* --HEADER --*/
   /*-- SELECTION --*/
   /* --BUTTON --*/
+  /* WEEK MODE --*/
 }
 .e-cal-timeline__wrapper .e-cal-timeline__header {
   font-size: var(--e-cal-timeline-header-fs);
@@ -40,6 +42,11 @@
   display: flex;
   justify-content: space-between;
 }
+.e-cal-timeline__wrapper .e-cal-timeline__header .e-cal-timeline__header__info {
+  font-weight: normal;
+  font-size: 0.875em;
+  margin-bottom: 0.2rem;
+}
 .e-cal-timeline__wrapper .e-cal-timeline__header .e-cal-timeline__header__btns .e-cal-timeline__btn {
   margin-right: 1rem;
   color: var(--e-cal-timeline-header-text-color);
@@ -133,6 +140,7 @@
   margin: 0;
   box-shadow: none;
   cursor: pointer;
+  margin-right: 0.35rem;
   /* required */
   display: inline-flex;
   align-items: center;
@@ -160,7 +168,20 @@
   color: var(--e-cal-timeline-footer-today-btn-color);
   background-color: var(--e-cal-timeline-footer-today-btn-bg);
 }
+.e-cal-timeline__wrapper .e-cal-timeline__btn--appearance {
+  border: 1px solid var(--e-cal-timeline-border-color);
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  padding: 0.2rem 1rem;
+}
+.e-cal-timeline__wrapper .e-cal-timeline__btn--appearance.active {
+  background-color: var(--e-cal-timeline-appearance-btn-active-bg);
+}
+.e-cal-timeline__wrapper.e-cal-timeline__wrapper--week .e-cal-timeline__header__info {
+  transform: translateX(-2.5rem);
+}
 
+/* WEEK MODE*/
 /*
 ///////////////////////////////////////////////////
 //////////////////// Table Grid  //////////////////
@@ -192,12 +213,13 @@
   --e-cal-timeline-table-add-btn-color: #0b5ed7;
   --e-cal-timeline-table-event-font-size: 0.75rem;
   --e-cal-timeline-table-event-hover-bg: rgba(255, 240, 227, 0);
-  --e-cal-timeline-table-event-hover-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15);
+  --e-cal-timeline-table-event-hover-shadow: inset 0px 0px 0px 1px rgba(21, 21, 240, 0.45);
   height: 100%; /* Required */
   font-size: var(--e-cal-timeline-table-bodycell-font-size);
   margin-top: -1px;
   position: relative;
   z-index: 2;
+  /* Required when using onKeyDown */
   /* list section */
   /* datagrid title */
   /* datagrid content */
@@ -220,6 +242,9 @@
   /* cell */
   /* scroller */
 }
+.e-cal-timeline-table__timeline-table__wrapper[tabindex]:focus-visible {
+  outline: none;
+}
 .e-cal-timeline-table__timeline-table__wrapper .e-cal-timeline-table__timeline-table {
   border: var(--e-cal-timeline-table-primary-border);
   text-align: left;
@@ -468,6 +493,9 @@
   overflow: hidden;
   height: auto;
 }
+.e-cal-timeline-table__timeline-table__wrapper .e-cal-timeline-table__scroller-harness--hideX {
+  overflow-x: hidden !important;
+}
 .e-cal-timeline-table__timeline-table__wrapper .e-cal-timeline-table__scroller-harness[data-scroll=body].dragging {
   cursor: grab;
 }

package/EventCalendarTimeline/index.d.ts

@@ -31,12 +31,18 @@ export declare type EventCalendarTimelineProps = {
     tableListEndClassName?: string;
     tableListDividerClassName?: string;
     customTodayDate?: string;
+    multipleCells?: boolean;
+    appearance?: 'week' | 'month';
+    appearanceToggle?: boolean;
+    appearanceWeekTmpl?: (startDate: string, endDate: string) => void;
     eventsValue?: TimelineRowListConfig[];
     langWeek?: string[];
     langWeekFull?: string[];
     langMonths?: string[];
     langMonthsFull?: string[];
     langToday?: string;
+    langAppearanceLabelMonth?: string;
+    langAppearanceLabelWeek?: string;
     iconRemove?: React.ReactNode | string;
     iconAdd?: React.ReactNode | string;
     cellCloseBtnClassName?: string;
@@ -51,7 +57,9 @@ export declare type EventCalendarTimelineProps = {
     onChangeMonth?: (currentData: any) => void;
     onChangeYear?: (currentData: any) => void;
     onChangeToday?: (currentData: any) => void;
+    onChangeWeek?: (startDate: string, endDate: string) => void;
     onListRenderComplete?: () => void;
+    onChangeAppearanceMode?: (mode: string) => void;
     modalMaskOpacity?: string;
     modalMaxWidth?: number | string;
     modalMinHeight?: number | string;
@@ -72,7 +80,9 @@ export declare type EventCalendarTimelineProps = {
     onModalDeleteEvent?: (currentData: any, closewin: any, gridInit: Function) => void;
     onCellMouseEnter?: (el: any) => void;
     onCellMouseLeave?: (el: any) => void;
-    onCellClick?: (el: any) => void;
+    onCellMouseUp?: (el: any, selectedCellsData: any[]) => void;
+    onCellClick?: (el: any, cellData: any) => void;
+    onKeyPressed?: (el: any, selectedCellsData: any[]) => void;
     tableListSectionTitle?: string | React.ReactNode;
     tableCellMinWidth?: number;
     tableTooltipDirection?: string;