directual-web-components-v2 3.11.332 → 3.11.333

package/dist/index.css

@@ -9369,7 +9369,7 @@ div._x81-m._xmAnF h2 {
   background: var(--table-raw-hover, rgba(5, 142, 252, 0.05));
 }
 ._1ReXH ._1r7Ng {
-  color: var(--hint-error, #ff525b);
+  color: var(--custom-danger-color, var(--hint-error, #ff525b));
 }
 ._3lcLW {
   display: flex;
@@ -9403,7 +9403,7 @@ div._x81-m._xmAnF h2 {
   min-width: 22px;
   height: 22px;
   padding: 0 6px;
-  background: var(--layout-accent, #058efc);
+  background: var(--custom-primary-color, var(--layout-accent, #058efc));
   color: white;
   border-radius: 11px;
   font-weight: 600;
@@ -9415,7 +9415,7 @@ div._x81-m._xmAnF h2 {
   opacity: 0.5;
 }
 ._3HMTt {
-  background: var(--hint-error, #ff525b);
+  background: var(--custom-danger-color, var(--hint-error, #ff525b));
 }
 ._1crO6 {
   font-size: 12px;
@@ -9455,7 +9455,7 @@ div._x81-m._xmAnF h2 {
           user-select: none;
 }
 ._87MAN:hover {
-  border-color: var(--layout-accent, #058efc);
+  border-color: var(--custom-primary-color, var(--layout-accent, #058efc));
   box-shadow: 0 2px 8px rgba(5, 142, 252, 0.15);
   transform: translateY(-1px);
 }
@@ -9463,18 +9463,18 @@ div._x81-m._xmAnF h2 {
   cursor: grabbing;
 }
 ._2iAUQ {
-  border-color: var(--hint-error, #ff525b);
+  border-color: var(--custom-danger-color, var(--hint-error, #ff525b));
 }
 ._2iAUQ:hover {
-  border-color: var(--hint-error, #ff525b);
+  border-color: var(--custom-danger-color, var(--hint-error, #ff525b));
   box-shadow: 0 2px 8px rgba(255, 82, 91, 0.2);
 }
 ._2iAUQ ._1DWib {
   background: rgba(255, 82, 91, 0.1);
-  color: var(--hint-error, #ff525b);
+  color: var(--custom-danger-color, var(--hint-error, #ff525b));
 }
 ._2iAUQ ._35zym {
-  color: var(--hint-error, #ff525b);
+  color: var(--custom-danger-color, var(--hint-error, #ff525b));
 }
 ._2MxuX {
   opacity: 0.6;
@@ -9492,17 +9492,17 @@ div._x81-m._xmAnF h2 {
   line-height: 1;
 }
 ._2rctI {
-  color: var(--layout-accent, #058efc) !important;
+  color: var(--custom-primary-color, var(--layout-accent, #058efc)) !important;
 }
 ._2K_cd {
-  color: var(--hint-error, #ff525b) !important;
+  color: var(--custom-danger-color, var(--hint-error, #ff525b)) !important;
 }
 ._38bqC {
   color: var(--form-placeholder-disabled, #999) !important;
   opacity: 0.5;
 }
 ._1U-yM {
-  border-color: var(--layout-accent, #058efc);
+  border-color: var(--custom-primary-color, var(--layout-accent, #058efc));
   box-shadow: 0 8px 24px rgba(5, 142, 252, 0.25);
   transform: rotate(2deg) scale(1.02);
   opacity: 0.9;
@@ -9513,7 +9513,7 @@ div._x81-m._xmAnF h2 {
   height: 36px;
   border-radius: 50%;
   background: var(--table-raw-hover, rgba(5, 142, 252, 0.05));
-  color: var(--layout-accent, #058efc);
+  color: var(--custom-primary-color, var(--layout-accent, #058efc));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9553,7 +9553,7 @@ div._x81-m._xmAnF h2 {
 }
 ._35zym {
   flex-shrink: 0;
-  color: var(--layout-accent, #058efc);
+  color: var(--custom-primary-color, var(--layout-accent, #058efc));
   font-size: 20px;
   line-height: 1;
   opacity: 0.4;

package/dist/index.js

@@ -27869,14 +27869,18 @@ var styles$Q = {"calendar_wrapper":"_1Kd9p","tableLoadingOverlay":"_171jy","tabl
 
 var styles$R = {"cardWeekGrid":"_3p51p","dayColumn":"_24AHL","dayColumnToday":"_2l38a","dayColumnHoliday":"_D_Zbr","dayHeader":"_2U9B_","dayHeaderToday":"_1QfDv","dayHeaderHoliday":"_1ReXH","dayOfWeek":"_1r7Ng","dayName":"_3lcLW","dayDate":"_1z3Am","dayStats":"_kipu5","counterBadge":"_73OWS","counterBadgeEmpty":"_1sGEE","counterBadgeOverflow":"_3HMTt","counterSlots":"_1crO6","dayOccupancy":"_3XUof","eventsList":"_2mTXM","eventsListDragOver":"_1AX7i","eventCard":"_87MAN","eventCardOverflow":"_2iAUQ","avatar":"_1DWib","eventArrow":"_35zym","eventCardInactive":"_2MxuX","statusDot":"_bMgwj","statusDotActive":"_2rctI","statusDotOverflow":"_2K_cd","statusDotInactive":"_38bqC","eventCardDragging":"_1U-yM","avatarImg":"_39viT","eventInfo":"_3soOX","eventTitle":"_2qD-g","eventRole":"_7KTAx"};
 
-const _excluded$9 = ["date", "events", "onSelectEvent", "onSelectSlot", "localizer", "culture", "dailySlots", "getSlotsForDay", "showNewEventButton", "showWeekends", "cardWeekDragEnabled", "cardWeekOnEventDrop", "onEventDrop", "isEventActive"];
+const _excluded$9 = ["date", "events", "onSelectEvent", "onSelectSlot", "localizer", "culture", "dailySlots", "getSlotsForDay", "showNewEventButton", "showWeekends", "cardWeekDragEnabled", "cardWeekOnEventDrop", "onEventDrop", "showAvatar", "showDotInCardWeek", "primaryColor", "dangerColor", "isEventActive"];
 const EventCard = _ref => {
   let {
     event,
     onSelect,
     provided,
     isDragging,
-    status = 'active'
+    status = 'active',
+    primaryColor = '',
+    dangerColor = '',
+    showAvatar = true,
+    showDotInCardWeek = true
   } = _ref;
   const firstLetter = (event.title || 'U')[0].toUpperCase();
   const cardClassName = [styles$R.eventCard, isDragging ? styles$R.eventCardDragging : '', status === 'overflow' ? styles$R.eventCardOverflow : '', status === 'inactive' ? styles$R.eventCardInactive : ''].filter(Boolean).join(' ');
@@ -27886,10 +27890,14 @@ const EventCard = _ref => {
   }, provided.draggableProps, provided.dragHandleProps, {
     className: cardClassName,
     onClick: e => onSelect && onSelect(event, e),
-    title: event.title
-  }), /*#__PURE__*/React__default.createElement("div", {
+    title: event.title,
+    style: {
+      '--custom-primary-color': primaryColor || 'var(--layout-accent, #058efc)',
+      '--custom-danger-color': dangerColor || 'var(--hint-error, #ff525b)'
+    }
+  }), showDotInCardWeek && /*#__PURE__*/React__default.createElement("div", {
     className: dotClassName
-  }, "\u25CF"), /*#__PURE__*/React__default.createElement("div", {
+  }, "\u25CF"), showAvatar && /*#__PURE__*/React__default.createElement("div", {
     className: styles$R.avatar
   }, event.avatarUrl ? /*#__PURE__*/React__default.createElement("img", {
     src: event.avatarUrl,
@@ -27919,6 +27927,10 @@ const CardWeekView = _ref2 => {
       cardWeekDragEnabled = true,
       cardWeekOnEventDrop,
       onEventDrop,
+      showAvatar = true,
+      showDotInCardWeek = true,
+      primaryColor = '',
+      dangerColor = '',
       isEventActive = null
     } = _ref2,
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded$9);
@@ -28037,14 +28049,16 @@ const CardWeekView = _ref2 => {
     }, day.format('dd')), /*#__PURE__*/React__default.createElement("span", {
       className: styles$R.dayDate
     }, day.format('DD.MM'))), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$R.dayStats
+      className: styles$R.dayStats,
+      style: {
+        '--custom-primary-color': primaryColor || 'var(--layout-accent, #058efc)',
+        '--custom-danger-color': dangerColor || 'var(--hint-error, #ff525b)'
+      }
     }, /*#__PURE__*/React__default.createElement("span", {
       className: badgeClass
     }, activeCount), /*#__PURE__*/React__default.createElement("span", {
       className: styles$R.counterSlots
-    }, "/ ", slotsForDay)), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$R.dayOccupancy
-    }, activeCount, "/", slotsForDay, " \u0437\u0430\u043D\u044F\u0442\u043E")), dragEnabled ? /*#__PURE__*/React__default.createElement(reactBeautifulDnd.Droppable, {
+    }, "/ ", slotsForDay))), dragEnabled ? /*#__PURE__*/React__default.createElement(reactBeautifulDnd.Droppable, {
       droppableId: key
     }, (provided, snapshot) => /*#__PURE__*/React__default.createElement("div", _extends({
       ref: provided.innerRef
@@ -28064,7 +28078,11 @@ const CardWeekView = _ref2 => {
         status: status,
         onSelect: onSelectEvent,
         provided: provided,
-        isDragging: snapshot.isDragging
+        showAvatar: showAvatar,
+        showDotInCardWeek: showDotInCardWeek,
+        isDragging: snapshot.isDragging,
+        primaryColor: primaryColor,
+        dangerColor: dangerColor
       }));
     }), provided.placeholder)) : /*#__PURE__*/React__default.createElement("div", {
       className: styles$R.eventsList
@@ -28078,12 +28096,16 @@ const CardWeekView = _ref2 => {
         event: event,
         status: status,
         onSelect: onSelectEvent,
+        showAvatar: showAvatar,
+        showDotInCardWeek: showDotInCardWeek,
         provided: {
           innerRef: () => {},
           draggableProps: {},
           dragHandleProps: {}
         },
-        isDragging: false
+        isDragging: false,
+        primaryColor: primaryColor,
+        dangerColor: dangerColor
       });
     })));
   };
@@ -28140,7 +28162,7 @@ function BigCalendar(props) {
     callEndpoint,
     handleModalRoute
   } = props;
-  console.log("props: \n\n ".concat(JSON.stringify(data)));
+  console.log("props: \n\n ".concat(JSON.stringify(_$1__default.get(data, "params", ""))));
   const [loading, setLoading] = React.useState(false);
   const lang = locale ? locale.length == 3 ? locale : 'ENG' : 'ENG';
   const culture = cultures[lang];
@@ -28156,8 +28178,10 @@ function BigCalendar(props) {
   const [hasChanges, setHasChanges] = React.useState(false);
   const [slotRules, setSlotRules] = React.useState(null);
   const [dql, setDQL] = React.useState('');
+  const [sort, setSort] = React.useState({});
   function performFiltering(newDql, newSort) {
     setDQL(prev => prev === (newDql || '') ? prev : newDql || '');
+    setSort(prev => _$1__default.isEqual(prev, newSort) ? prev : newSort);
   }
   const dqlService = React.useMemo(() => _$1__default.debounce(performFiltering, 600), []);
   const [visibleRange, setVisibleRange] = React.useState({
@@ -28181,6 +28205,8 @@ function BigCalendar(props) {
   const showResize = _$1__default.get(data, "params.general.onResize", true);
   const showNewEventButton = _$1__default.get(data, "params.general.showNewEventButton", true);
   const mappingFields = _$1__default.get(data, "params.mapping", {});
+  const showAvatar = _$1__default.get(data, "params.general.showAvatar", true);
+  const showDotInCardWeek = _$1__default.get(data, "params.general.showDotInCardWeek", true);
   const hideViewSelector = _$1__default.get(data, "params.view.hideViewSelector", false);
   const availableViews = _$1__default.get(data, "params.view.availableViews", ["month", "week", "day", "card_week"]);
   const dailySlots = _$1__default.get(data, "params.view.dailySlots", 15);
@@ -28198,6 +28224,8 @@ function BigCalendar(props) {
   const mapping_slots = _$1__default.get(data, "params.conditions.cardWeek.mapping.slots", "");
   const mapping_isHoliday = _$1__default.get(data, "params.conditions.cardWeek.mapping.isHoliday", "");
   const mapping_note = _$1__default.get(data, "params.conditions.cardWeek.mapping.note", "");
+  const primaryColor = _$1__default.get(data, "params.conditions.cardWeek.primaryColor", '');
+  const dangerColor = _$1__default.get(data, "params.conditions.cardWeek.dangerColor", '');
   const actionsSettings = _$1__default.get(data, "params.actions", []);
   React.useEffect(() => getEventsFromAPI(), [visibleRange, currentView, dql]);
   const formats = {
@@ -28301,7 +28329,7 @@ function BigCalendar(props) {
         title: event[mappingFields.titleField],
         description: event[mappingFields.descriptionField],
         author: event[mappingFields.userField],
-        avatarUrl: _$1__default.get(event, mappingFields.userField.replace('{{', '').replace('}}', '') + ".userpic", '')
+        avatarUrl: showAvatar && _$1__default.get(event, mappingFields.userField + ".userpic", '{{}}').replace('{{', '').replace('}}', '')
       });
     });
     const validEvents = _$1__default.filter(events, isValidEvent);
@@ -28666,6 +28694,10 @@ function BigCalendar(props) {
       showWeekends: showWeekends,
       cardWeekDragEnabled: showDragAndDrop,
       cardWeekOnEventDrop: setEventChange,
+      showAvatar: showAvatar,
+      showDotInCardWeek: showDotInCardWeek,
+      primaryColor: primaryColor,
+      dangerColor: dangerColor,
       isEventActive: conditionOne ? event => evaluateCondition(conditionOne, event) : null
     }));
     Wrapper.title = CardWeekView.title;