funda-ui 1.0.537 → 1.0.545

package/ColorPicker/index.css

@@ -1,10 +1,14 @@
 /* ======================================================
     <!-- Color Picker -->
 /* ====================================================== */
-.custom-form-control-color {
+.custom-colorpicker__wrapper {
+  position: relative;
   --color-control-border-radius: 0.375rem;
   --color-control-size: 30px;
   --color-control-border-color: rgba(0,0,0,.1);
+  /* placeholder */
+}
+.custom-colorpicker__wrapper .custom-colorpicker-control {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -15,24 +19,40 @@
   border: none;
   cursor: pointer;
 }
-.custom-form-control-color::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-webkit-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color::-moz-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker-control::-moz-color-swatch {
   border: 2px solid var(--color-control-border-color);
 }
-.custom-form-control-color:disabled {
+.custom-colorpicker__wrapper .custom-colorpicker-control:disabled {
   cursor: not-allowed;
 }
-.custom-form-control-color.custom-form-control-color--rounded::-webkit-color-swatch {
+.custom-colorpicker__wrapper .custom-colorpicker__transparent-placeholder {
+  position: absolute;
+  width: var(--color-control-size);
+  height: var(--color-control-size);
+  left: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: var(--color-control-border-radius);
+}
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker-control::-moz-color-swatch {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--rounded::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--rounded .custom-colorpicker__transparent-placeholder {
   border-radius: var(--color-control-border-radius);
 }
-.custom-form-control-color.custom-form-control-color--circle::-webkit-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-webkit-color-swatch {
+  border-radius: 50%;
+}
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker-control::-moz-color-swatch {
   border-radius: 50%;
 }
-.custom-form-control-color.custom-form-control-color--circle::-moz-color-swatch {
+.custom-colorpicker__wrapper.custom-colorpicker--circle .custom-colorpicker__transparent-placeholder {
   border-radius: 50%;
 }

package/ColorPicker/index.d.ts

@@ -7,6 +7,8 @@ declare module 'react' {
 interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
     wrapperClassName?: string;
     controlClassName?: string;
+    clearBtnClassName?: string;
+    clearBtnLabel?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/ColorPicker/index.js

@@ -96,7 +96,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-var _excluded = ["wrapperClassName", "controlClassName", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "clearBtnClassName", "clearBtnLabel", "disabled", "required", "readOnly", "value", "label", "name", "shape", "id", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -111,6 +111,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, _ref) {
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
+    clearBtnClassName = props.clearBtnClassName,
+    clearBtnLabel = props.clearBtnLabel,
     disabled = props.disabled,
     required = props.required,
     readOnly = props.readOnly,
@@ -137,10 +139,10 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   if (shape && typeof shape === 'string') {
     switch (shape) {
       case 'rounded':
-        shapeClassName = 'custom-form-control-color--rounded';
+        shapeClassName = 'custom-colorpicker--rounded';
         break;
       case 'circle':
-        shapeClassName = 'custom-form-control-color--circle';
+        shapeClassName = 'custom-colorpicker--circle';
         break;
     }
   }
@@ -182,7 +184,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     setChangedVal(value || '');
   }, [value]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
+    className: wrapperClassName || wrapperClassName === '' ? "custom-colorpicker__wrapper  ".concat(shapeClassName, " ").concat(wrapperClassName) : "custom-colorpicker__wrapper mb-3 position-relative  ".concat(shapeClassName),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,
@@ -203,7 +205,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     },
     tabIndex: tabIndex || 0,
     type: "color",
-    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-form-control-color flex-grow-0", " ").concat(shapeClassName),
+    className: "".concat(controlClassName || controlClassName === '' ? controlClassName : "form-control custom-colorpicker-control flex-grow-0"),
     id: idRes,
     name: name,
     value: changedVal,
@@ -214,11 +216,20 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     required: required || null,
     readOnly: readOnly || null,
     style: style
-  }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, attributes)), changedVal !== '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    tabIndex: -1,
+    type: "button",
+    className: clearBtnClassName || 'btn btn-link btn-sm',
+    onClick: function onClick() {
+      setChangedVal('');
+    }
+  }, clearBtnLabel || 'clear')) : null), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "text-danger"
-  }, "*"))) : ''));
+  }, "*"))) : '', changedVal === '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "custom-colorpicker__transparent-placeholder"
+  })) : null));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
 })();

package/EventCalendar/index.css

@@ -0,0 +1,228 @@
+/* ======================================================
+   <!-- Event Calendar -->
+/* ====================================================== */
+.custom-event-cal__wrapper {
+  --custom-event-cal-wrapper-min-width: 400px;
+  --custom-event-cal-border-color: #ddd;
+  --custom-event-cal-border-color-hover: #333;
+  --custom-event-cal-header-fs: 1.125rem;
+  --custom-event-cal-default-border-color: #eee;
+  --custom-event-cal-day-border-color: #ddd;
+  --custom-event-cal-day-hover-bg: #f6f6f6;
+  --custom-event-cal-dayselected-bg: #0b5ed7;
+  --custom-event-cal-dayselected-text-color: #fff;
+  --custom-event-cal-year-month-btn-border-color: #ddd;
+  --custom-event-cal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
+  --custom-event-cal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
+  --custom-event-cal-year-month-btn-selected-color: #fff;
+  --custom-event-cal-month-wrapper-w: 18.75rem;
+  --custom-event-cal-year-wrapper-w: 18.75rem;
+  --custom-event-cal-header-arrow-bg: #000;
+  --custom-event-cal-header-text-color: #000;
+  --custom-event-cal-header-prevnext-btn-bg: transparent;
+  --custom-event-cal-header-prevnext-btn-color: #000;
+  --custom-event-cal-header-prevnext-btn-radius: 0.25rem;
+  --custom-event-cal-delete-btn-color: #ee4949;
+  --custom-event-cal-footer-today-btn-bg: rgba(0, 58, 166, 1);
+  --custom-event-cal-footer-today-btn-color: #fff;
+  --custom-event-cal-event-bg: rgb(255, 240, 227);
+  position: relative;
+  min-width: var(--custom-event-cal-wrapper-min-width);
+  border: 1px solid var(--custom-event-cal-border-color);
+  /* --HEADER --*/
+  /*-- BODY --*/
+  /*-- CELL --*/
+  /*-- SELECTION --*/
+  /* --BUTTON --*/
+}
+.custom-event-cal__wrapper .custom-event-cal__header {
+  font-size: var(--custom-event-cal-header-fs);
+  font-weight: bold;
+  padding: 10px 10px 5px 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn {
+  margin-right: 1rem;
+  color: var(--custom-event-cal-header-text-color);
+}
+.custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn svg {
+  margin-left: 0.3rem;
+}
+.custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn svg path {
+  fill: var(--custom-event-cal-header-arrow-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn.active svg {
+  transform: rotate(180deg);
+}
+.custom-event-cal__wrapper .custom-event-cal__body {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.custom-event-cal__wrapper .custom-event-cal__row {
+  display: flex;
+  width: 100%;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell {
+  flex: 1;
+  position: relative;
+  height: auto;
+  min-height: 4.75em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  border-width: 0;
+  border-color: var(--custom-event-cal-default-border-color);
+  border-style: solid;
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.last-cell {
+  border-right-width: 0;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.last-row {
+  border-bottom-width: 1px;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.custom-event-cal__day--week {
+  min-height: 2.75em;
+  align-items: end;
+  padding-inline-end: 0.75rem;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__event {
+  background-color: var(--custom-event-cal-event-bg);
+  width: 100%;
+  padding: 0.1rem 0.5rem;
+  margin: 0.5rem;
+  border-radius: 0;
+  margin-top: 2.5rem;
+  text-align: left;
+  font-size: 0.75rem;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__eventdel {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  display: none;
+  color: var(--custom-event-cal-delete-btn-color);
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__eventdel svg path {
+  fill: var(--custom-event-cal-delete-btn-color);
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell > span {
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  display: inline-block;
+  padding: 0.1rem;
+  border-radius: 50%;
+  width: 1.7rem;
+  height: 1.7rem;
+  line-height: 1.5;
+  margin: 0.5rem 0;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell > span.disabled {
+  opacity: 0.2;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty) {
+  cursor: pointer;
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.selected > span {
+  color: var(--custom-event-cal-dayselected-text-color);
+  background-color: var(--custom-event-cal-dayselected-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty):hover {
+  background-color: var(--custom-event-cal-day-hover-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty):hover .custom-event-cal__day__eventdel {
+  display: block;
+}
+.custom-event-cal__wrapper .custom-event-cal__month-wrapper {
+  position: absolute;
+  width: var(--custom-event-cal-month-wrapper-w);
+  height: auto;
+  z-index: 1;
+  top: calc(1rem + 22px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+}
+.custom-event-cal__wrapper .custom-event-cal__month-wrapper.active {
+  display: block;
+}
+.custom-event-cal__wrapper .custom-event-cal__month-wrapper .custom-event-cal__month-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 2.5em);
+  grid-gap: 10px;
+}
+.custom-event-cal__wrapper .custom-event-cal__year-wrapper {
+  position: absolute;
+  width: var(--custom-event-cal-year-wrapper-w);
+  height: auto;
+  z-index: 1;
+  top: calc(1rem + 22px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+}
+.custom-event-cal__wrapper .custom-event-cal__year-wrapper.active {
+  display: block;
+}
+.custom-event-cal__wrapper .custom-event-cal__year-wrapper .custom-event-cal__year-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 2.5em);
+  grid-gap: 5px;
+}
+.custom-event-cal__wrapper .custom-event-cal__year,
+.custom-event-cal__wrapper .custom-event-cal__month {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  font-size: 0.875em;
+  border: 1px solid var(--custom-event-cal-year-month-btn-border-color);
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+.custom-event-cal__wrapper .custom-event-cal__year:hover,
+.custom-event-cal__wrapper .custom-event-cal__month:hover {
+  background-color: var(--custom-event-cal-year-month-btn-hover-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__year.selected,
+.custom-event-cal__wrapper .custom-event-cal__month.selected {
+  background-color: var(--custom-event-cal-year-month-btn-selected-bg);
+  color: var(--custom-event-cal-year-month-btn-selected-color);
+}
+.custom-event-cal__wrapper .custom-event-cal__btn {
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  cursor: pointer;
+}
+.custom-event-cal__wrapper .custom-event-cal__btn svg path {
+  fill: var(--custom-event-cal-header-arrow-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__btn--prev, .custom-event-cal__wrapper .custom-event-cal__btn--next {
+  border-radius: var(--custom-event-cal-header-prevnext-btn-radius);
+  color: var(--custom-event-cal-header-prevnext-btn-color);
+  background-color: var(--custom-event-cal-header-prevnext-btn-bg);
+}
+.custom-event-cal__wrapper .custom-event-cal__btn--prev svg path, .custom-event-cal__wrapper .custom-event-cal__btn--next svg path {
+  fill: var(--custom-event-cal-header-prevnext-btn-color);
+}
+.custom-event-cal__wrapper .custom-event-cal__btn--today {
+  border: 1px solid var(--custom-event-cal-border-color);
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  padding: 0.2rem 1rem;
+  color: var(--custom-event-cal-footer-today-btn-color);
+  background-color: var(--custom-event-cal-footer-today-btn-bg);
+}

package/EventCalendar/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+declare type EventCalendarProps = {
+    customTodayDate?: string;
+    eventsValue?: any[];
+    langWeek?: string[];
+    langWeekFull?: string[];
+    langMonths?: string[];
+    langMonthsFull?: string[];
+    langToday?: string;
+    iconRemove?: React.ReactNode | string;
+    onChangeDate?: (currentData: any) => void;
+    modalMaskOpacity?: string;
+    modalMaxWidth?: number | string;
+    modalMinHeight?: number | string;
+    modalHeading?: React.ReactNode;
+    modalContent?: React.ReactNode;
+    modalDeleteContent?: React.ReactNode;
+    modalCloseBtnClassName?: string;
+    modalCloseBtnLabel?: string | React.ReactNode;
+    modalSubmitBtnClassName?: string;
+    modalSubmitBtnLabel?: string | React.ReactNode;
+    modalSubmitDeleteBtnClassName?: string;
+    modalSubmitDeleteBtnLabel?: string | React.ReactNode;
+    onModalEditOpen?: (currentData: any) => void;
+    onModalEditClose?: (currentData: any) => void;
+    onModalDeleteOpen?: (currentData: any) => void;
+    onModalDeleteClose?: (currentData: any) => void;
+    onModalEditEvent?: (currentData: any, closewin: any) => void;
+    onModalDeleteEvent?: (currentData: any, closewin: any) => void;
+};
+declare const EventCalendar: (props: EventCalendarProps) => JSX.Element;
+export default EventCalendar;