oa-componentbook 0.18.167 → 0.18.169

package/build/components/oa-component-select/CustomSelect.js

@@ -46,6 +46,7 @@ const valuesArrayToOptionArray = (valuesArray, valueLabelMap) => valuesArray.map
   label: valueLabelMap === null || valueLabelMap === void 0 ? void 0 : valueLabelMap[value]
 }));
 function CustomSelect(_ref) {
+  var _selectedOptions$inde2;
   let {
       allText,
       children,
@@ -120,7 +121,8 @@ function CustomSelect(_ref) {
   });
   const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualDefaultValue);
   const getMaxTagPlaceholder = omittedValues => {
-    if (selectedOptions.indexOf(allText) !== -1) {
+    var _selectedOptions$inde;
+    if ((selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde = selectedOptions.indexOf) === null || _selectedOptions$inde === void 0 ? void 0 : _selectedOptions$inde.call(selectedOptions, allText)) !== -1) {
       return null;
     }
     return "".concat("+".concat(omittedValues.length, " more"));
@@ -153,8 +155,9 @@ function CustomSelect(_ref) {
     });
   };
   const onOptionsChangeForMultiple = (select, value) => {
-    const newlySelectedOptions = selectedOptions.slice(0);
-    const allIndex = newlySelectedOptions.indexOf(allText);
+    var _newlySelectedOptions;
+    const newlySelectedOptions = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0);
+    const allIndex = newlySelectedOptions === null || newlySelectedOptions === void 0 || (_newlySelectedOptions = newlySelectedOptions.indexOf) === null || _newlySelectedOptions === void 0 ? void 0 : _newlySelectedOptions.call(newlySelectedOptions, allText);
     if (allIndex !== -1) {
       newlySelectedOptions.splice(allIndex, 1);
     }
@@ -171,13 +174,14 @@ function CustomSelect(_ref) {
           return !((_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false);
         });
         if (newlySelectedOptions.length === enabledOptions.length && allText) {
-          newlySelectedOptions.unshift(allText);
+          newlySelectedOptions === null || newlySelectedOptions === void 0 || newlySelectedOptions.unshift(allText);
         }
       }
     } else if (value === allText) {
       newlySelectedOptions.length = 0; // Emptying the array.
     } else {
-      newlySelectedOptions.splice(newlySelectedOptions.indexOf(value), 1);
+      var _newlySelectedOptions2;
+      newlySelectedOptions.splice((_newlySelectedOptions2 = newlySelectedOptions.indexOf) === null || _newlySelectedOptions2 === void 0 ? void 0 : _newlySelectedOptions2.call(newlySelectedOptions, value), 1);
     }
     const optionsWithoutAllText = newlySelectedOptions.filter(option => option !== allText);
 
@@ -186,6 +190,7 @@ function CustomSelect(_ref) {
     setSelectedOptions(newlySelectedOptions);
   };
   const onOptionsChange = mode === 'multiple' ? onOptionsChangeForMultiple : onOptionsChangeForSingle;
+  console.log(selectedOptions, 'selectedOptions');
   return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       components: {
@@ -255,7 +260,7 @@ function CustomSelect(_ref) {
       padding: '0px'
     },
     mode: mode,
-    maxTagCount: selectedOptions.indexOf(allText) === -1 ? 'responsive' : 1,
+    maxTagCount: (selectedOptions === null || selectedOptions === void 0 || (_selectedOptions$inde2 = selectedOptions.indexOf) === null || _selectedOptions$inde2 === void 0 ? void 0 : _selectedOptions$inde2.call(selectedOptions, allText)) === -1 ? 'responsive' : 1,
     maxTagPlaceholder: getMaxTagPlaceholder,
     onDeselect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(false, value) : undefined,
     onSelect: (0, _utils.isFunction)(onSelectionChange) ? value => onOptionsChange(true, value) : undefined,

package/build/global-css/GridLayout.js

@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // TODO: Figure out a way to make this work with storybook.
 // Can be used to wrap the entire application, to make these styles available to every component
 
-const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n      vertical-align: middle;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
+const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n      vertical-align: middle;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n\n\n.ant-select-dropdown{ width: auto !important; border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n  .ant-select-dropdown .ant-select-item {  \n    min-height: auto;\n    padding: 12px 16px;\n    color: var(--color-primary-content) ;\n    line-height: 20px;\n    border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.label-date-dropdown span + span {height:20px !important;}\n.ant-select-dropdown .ant-select-item:last-child {border-top: 1px solid #E0E0E0;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content div{border-top: none !important;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content .label-date-dropdown span{color: var(--color-primary-content);\n  font-size: 14px; margin:0;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;  }\n\n\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content span{color: var(--color-secondary-content);\n  font-size: 12px; margin:4px 0 0 0;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; }\n\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; inset: 60px auto auto 0px !important;}\n\n\n\n@media only screen and (max-width: 600px) {\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
 var _default = exports.default = GridLayout;

package/build/index.js

@@ -245,6 +245,12 @@ Object.defineProperty(exports, "CustomTooltip", {
     return _CustomTooltip.default;
   }
 });
+Object.defineProperty(exports, "DateDropDown", {
+  enumerable: true,
+  get: function get() {
+    return _DateDropDown.default;
+  }
+});
 Object.defineProperty(exports, "DocUploadWidget", {
   enumerable: true,
   get: function get() {
@@ -505,6 +511,7 @@ var _ServiceCard = _interopRequireDefault(require("./widgets/oa-widget-serviceca
 var _CustomProgressBar = _interopRequireDefault(require("./components/oa-component-progress-bar/CustomProgressBar"));
 var _CustomHeaderWidget = _interopRequireDefault(require("./widgets/oa-widget-header/CustomHeaderWidget"));
 var _CustomFormWidget = _interopRequireDefault(require("./widgets/oa-widget-form/CustomFormWidget"));
+var _DateDropDown = _interopRequireDefault(require("./widgets/oa-widget-date-dropdown/DateDropDown"));
 var _CustomRating = _interopRequireDefault(require("./components/oa-component-rating/CustomRating"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/build/widgets/oa-widget-date-dropdown/DateDropDown.js

@@ -0,0 +1,248 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));
+var _dayjs3 = _interopRequireDefault(require("dayjs"));
+var _styles = require("./styles");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _CustomSelect = _interopRequireDefault(require("../../components/oa-component-select/CustomSelect"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const {
+  RangePicker
+} = _antd.DatePicker;
+function getDateOffset(day) {
+  if (day === -1) return null;
+  const days = parseInt(day, 10);
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date;
+}
+let rangePickerLabel;
+const labelWithDate = {};
+function DateDropDown(_ref) {
+  let {
+    options,
+    format,
+    getValues,
+    defaultLabel,
+    subLine,
+    resetState,
+    beforeDisabledDate,
+    afterDisabledDate
+  } = _ref;
+  const [showRangePicker, setshowRangePicker] = (0, _react.useState)(false);
+  const [selectValue, setSelectValue] = (0, _react.useState)({
+    label: defaultLabel,
+    dateSelected: false,
+    prevLabel: ''
+  });
+  (0, _react.useEffect)(() => {
+    options.forEach(option => {
+      if (option.value === -1) {
+        rangePickerLabel = option.label;
+      }
+      labelWithDate[option.label] = option.value;
+    });
+    if (selectValue !== null && selectValue !== void 0 && selectValue.label) {
+      getValues({
+        startDate: (0, _dayjs3.default)(getDateOffset(labelWithDate[selectValue.label])).format(format),
+        endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format),
+        label: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label
+      });
+    }
+  }, []);
+  const resetLocalState = () => {
+    setSelectValue({
+      label: defaultLabel,
+      dateSelected: false,
+      prevLabel: ''
+    });
+    setshowRangePicker(false);
+    getValues({
+      startDate: (0, _dayjs3.default)(getDateOffset(labelWithDate[defaultLabel])).format(format),
+      endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format),
+      label: defaultLabel
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (resetState) {
+      resetLocalState();
+    }
+  }, [resetState]);
+  const showTickIcon = (label, selectedLabel, dateSelected, isCustomRange) => label === selectedLabel || isCustomRange && dateSelected;
+  const optionRender = option => {
+    var _option$label;
+    const selectedLabel = option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.props) === null || _option$label === void 0 ? void 0 : _option$label.children;
+    const isCustomRange = selectedLabel === rangePickerLabel;
+    const {
+      label,
+      dateSelected
+    } = selectValue !== null && selectValue !== void 0 ? selectValue : {};
+    return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, {
+      style: isCustomRange ? {
+        borderTop: '1px solid grey'
+      } : {}
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "label-date-dropdown"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: showTickIcon(label, selectedLabel, dateSelected, isCustomRange) ? {
+        color: _ColorVariablesMap.default['--color-primary']
+      } : {}
+    }, option.label), showTickIcon(label, selectedLabel, dateSelected, isCustomRange) && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Done.default,
+      size: 20,
+      color: "primary"
+    }))), isCustomRange && /*#__PURE__*/_react.default.createElement("span", null, subLine));
+  };
+  const onSelect = event => {
+    if ((event === null || event === void 0 ? void 0 : event.label) === rangePickerLabel) {
+      setSelectValue(prev => {
+        setshowRangePicker(true);
+        return {
+          label: 'Start date -End date',
+          dateSelected: false,
+          prevLabel: prev.label
+        };
+      });
+    } else {
+      getValues({
+        startDate: (0, _dayjs3.default)(getDateOffset(event.value)).format(format),
+        endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format),
+        label: event === null || event === void 0 ? void 0 : event.label
+      });
+      setSelectValue({
+        label: event === null || event === void 0 ? void 0 : event.label,
+        dateSelected: false
+      });
+      setshowRangePicker(false);
+    }
+  };
+  const handleDateRangeValue = e => {
+    var _dayjs, _dayjs$format, _e$, _dayjs2, _dayjs2$format, _e$2;
+    const fromDateApi = _dayjs3.default === null || _dayjs3.default === void 0 || (_dayjs = (0, _dayjs3.default)(e === null || e === void 0 || (_e$ = e[0]) === null || _e$ === void 0 ? void 0 : _e$.$d)) === null || _dayjs === void 0 || (_dayjs$format = _dayjs.format) === null || _dayjs$format === void 0 ? void 0 : _dayjs$format.call(_dayjs, format);
+    const toDateApi = _dayjs3.default === null || _dayjs3.default === void 0 || (_dayjs2 = (0, _dayjs3.default)(e === null || e === void 0 || (_e$2 = e[1]) === null || _e$2 === void 0 ? void 0 : _e$2.$d)) === null || _dayjs2 === void 0 || (_dayjs2$format = _dayjs2.format) === null || _dayjs2$format === void 0 ? void 0 : _dayjs2$format.call(_dayjs2, format);
+    const date = "".concat(fromDateApi, " - ").concat(toDateApi);
+    setSelectValue({
+      label: date,
+      dateSelected: true
+    });
+    getValues({
+      startDate: fromDateApi,
+      endDate: toDateApi,
+      label: date
+    });
+    setshowRangePicker(false);
+  };
+  const handleOnSelectClick = () => {
+    setshowRangePicker(false);
+    if (selectValue !== null && selectValue !== void 0 && selectValue.prevLabel) {
+      const getParsedValue = labelWithDate[selectValue === null || selectValue === void 0 ? void 0 : selectValue.prevLabel];
+      setSelectValue(prev => {
+        if (prev.prevLabel) {
+          getValues({
+            startDate: (0, _dayjs3.default)(getParsedValue).format(format),
+            endDate: (0, _dayjs3.default)(getDateOffset(0)).format(format),
+            label: selectValue === null || selectValue === void 0 ? void 0 : selectValue.prevLabel
+          });
+          return {
+            label: prev === null || prev === void 0 ? void 0 : prev.prevLabel,
+            dateSelected: false,
+            prevLabel: ''
+          };
+        }
+        return _objectSpread({}, prev);
+      });
+    }
+  };
+  const disabledDateHandler = e => {
+    if (beforeDisabledDate) {
+      if (e.isBefore(beforeDisabledDate, 'day')) {
+        return true;
+      }
+    }
+    if (afterDisabledDate) {
+      if (e.isAfter(afterDisabledDate, 'day')) {
+        return true;
+      }
+    }
+    return false;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    defaultLabel: setSelectValue === null || setSelectValue === void 0 ? void 0 : setSelectValue.label,
+    value: selectValue === null || selectValue === void 0 ? void 0 : selectValue.label,
+    className: "selectWidth",
+    placeholder: "Please select a date",
+    optionRender: optionRender,
+    options: options,
+    onSelectionChange: onSelect
+  }), showRangePicker && /*#__PURE__*/_react.default.createElement("div", {
+    className: "datePicker"
+  }, /*#__PURE__*/_react.default.createElement(RangePicker, {
+    open: true,
+    onOpenChange: () => handleOnSelectClick(),
+    autoFocus: true,
+    allowClear: true,
+    format: format,
+    disabledDate: e => disabledDateHandler(e),
+    onChange: value => handleDateRangeValue(value)
+  })));
+}
+DateDropDown.propTypes = {
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  getValues: _propTypes.default.func,
+  format: _propTypes.default.string,
+  defaultLabel: _propTypes.default.string,
+  resetState: _propTypes.default.bool,
+  subLine: _propTypes.default.string,
+  beforeDisabledDate: _propTypes.default.instanceOf(Date),
+  afterDisabledDate: _propTypes.default.instanceOf(Date)
+};
+DateDropDown.defaultProps = {
+  options: [{
+    label: 'Today',
+    value: 0
+  }, {
+    label: 'Yesterday',
+    value: 1
+  }, {
+    label: 'Last 30 days',
+    value: 30
+  }, {
+    // label: (<div className="customDateRange">
+    //   <h6>Custome Range</h6>
+    //   <p>Data available from Jun, 2023</p>
+    // </div>),
+
+    label: 'Custom Range',
+    value: -1
+  }],
+  format: 'DD-MMM-YYYY',
+  subLine: 'Data available from Jun, 2023',
+  beforeDisabledDate: null,
+  afterDisabledDate: null,
+  defaultLabel: null,
+  getValues: () => {},
+  resetState: false
+};
+var _default = exports.default = DateDropDown;

package/build/widgets/oa-widget-date-dropdown/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.customDateRange{display:flex; flex-direction:column;}\n.customDateRange h6{color: var(--color-primary-content);\n    font-size: 14px; margin:0;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;}\n\n    .customDateRange span{\n        color: var(--color-secondary-content);\nmargin:4px 0 0 0;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 16px; }\n.ant-select-dropdown {width:auto !important;}\n\n\n"])));

package/build/widgets/oa-widget-detailcard/MembershipDetailCard.js

@@ -48,8 +48,8 @@ function MembershipDetailCard(_ref) {
   }, secondaryInfo && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondary-content",
     className: "type-b2-400"
-  }, secondaryInfo)), /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: primaryInfo.type === 'success' ? 'positive' : 'negative',
+  }, secondaryInfo)), /*#__PURE__*/_react.default.createElement("label", null, ' ', primaryInfo && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: (primaryInfo === null || primaryInfo === void 0 ? void 0 : primaryInfo.type) === 'success' ? 'positive' : 'negative',
     className: "type-b2-400"
   }, primaryInfo.label)))), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
     className: "primaryInfo",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.167",
+  "version": "0.18.169",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",