sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/FilterPanel/FilterPanel.stories.js

@@ -1,967 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PeriodPickerWithInitialValueYear = exports.PeriodPickerWithInitialValueQuarter = exports.PeriodPickerWithInitialValueMonth = exports.PeriodPickerWithInitialValueDaterange = exports.NoXClearOptionPage = exports.NewItemCenterEventsPage = exports.MultiDropdown = exports.FilterQuatertlyReport = exports.FilterPanelBlue = exports.DisableOKButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const NewItemCenterData = [{
-  name: 'Retailer',
-  label: 'Retailer',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: true,
-  inputType: 'dropdown',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }],
-  defaultValue: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event type',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdown',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38  Event #37 and 38',
-    label: 'Large Selling Event #37 and 38  Event #37 and 38'
-  }]
-  // defaultValue: { value: 'Large Selling Event #10 POD3', label: 'Large Selling Event #10 POD3' },
-}, {
-  name: 'DateRange',
-  label: 'Date Range',
-  labelEmptyValue: 'All Dates',
-  disabled: false,
-  required: true,
-  inputType: 'datepicker',
-  showInfo: true,
-  placeHolder: 'MM/DD/YYYY'
-}];
-const NewItemCenterMultiData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: true,
-  xIconShow: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }],
-  defaultValue: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38  Event #37 and 38',
-    label: 'Large Selling Event #37 and 38  Event #37 and 38'
-  }]
-}, {
-  name: 'DateRange',
-  label: 'Date Range',
-  labelEmptyValue: 'All Dates',
-  disabled: false,
-  required: true,
-  inputType: 'datepicker',
-  showInfo: true,
-  placeHolder: 'MM/DD/YYYY'
-}];
-const QuatertlyData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38',
-    label: 'Large Selling Event #37 and 38'
-  }]
-}, {
-  name: 'EventName',
-  label: 'Event Names',
-  labelEmptyValue: 'All Event Names',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Event Name 1',
-    label: 'Event Name 1'
-  }, {
-    value: 'Event Name 2',
-    label: 'Event Name 2'
-  }, {
-    value: 'Event Name 3',
-    label: 'Event Name 3'
-  }]
-}, {
-  name: 'EventTimeframe',
-  label: 'Select Event Timeframe',
-  labelEmptyValue: 'All Dates Types',
-  disabled: false,
-  required: false,
-  inputType: 'periodpicker',
-  placeHolder: 'Select Dates Types...',
-  dropdownOptions: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }, {
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'quarter',
-    label: 'Quarter'
-  }, {
-    value: 'year',
-    label: 'Year'
-  }],
-  availableQuarters: ['Q1-2024'],
-  availableMonths: ['Jan 2024'],
-  availableYears: ['2023'],
-  defaultValueYears: {
-    value: '2023',
-    label: '2023'
-  }
-}, {
-  name: 'Supplier',
-  label: 'Suppliers',
-  labelEmptyValue: 'All Suppliers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Supplier 1',
-    label: 'Supplier 1'
-  }, {
-    value: 'Supplier 2',
-    label: 'Supplier 2'
-  }, {
-    value: 'Supplier 3',
-    label: 'Supplier 3'
-  }]
-}];
-const PeriodPickerWithInitialDaterangeData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38',
-    label: 'Large Selling Event #37 and 38'
-  }]
-}, {
-  name: 'EventName',
-  label: 'Event Names',
-  labelEmptyValue: 'All Event Names',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Event Name 1',
-    label: 'Event Name 1'
-  }, {
-    value: 'Event Name 2',
-    label: 'Event Name 2'
-  }, {
-    value: 'Event Name 3',
-    label: 'Event Name 3'
-  }]
-}, {
-  name: 'Supplier',
-  label: 'Suppliers',
-  labelEmptyValue: 'All Suppliers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Supplier 1',
-    label: 'Supplier 1'
-  }, {
-    value: 'Supplier 2',
-    label: 'Supplier 2'
-  }, {
-    value: 'Supplier 3',
-    label: 'Supplier 3'
-  }]
-}, {
-  name: 'EventTimeframe',
-  label: 'Select Event Timeframe',
-  labelEmptyValue: 'All Dates Types',
-  disabled: false,
-  required: false,
-  inputType: 'periodpicker',
-  periodPickerSelectedValue: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }],
-  selectedValue: '06/08/2024 - 14/08/2024',
-  placeHolder: 'Select Dates Types...',
-  dropdownOptions: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }, {
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'quarter',
-    label: 'Quarter'
-  }, {
-    value: 'year',
-    label: 'Year'
-  }],
-  availableQuarters: ['Q1-2024', 'Q2-2024'],
-  availableMonths: ['Jan 2024'],
-  defaultValueYears: {
-    value: '2024',
-    label: '2024'
-  }
-}];
-const PeriodPickerWithInitialQuarterData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38',
-    label: 'Large Selling Event #37 and 38'
-  }]
-}, {
-  name: 'EventName',
-  label: 'Event Names',
-  labelEmptyValue: 'All Event Names',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Event Name 1',
-    label: 'Event Name 1'
-  }, {
-    value: 'Event Name 2',
-    label: 'Event Name 2'
-  }, {
-    value: 'Event Name 3',
-    label: 'Event Name 3'
-  }]
-}, {
-  name: 'Supplier',
-  label: 'Suppliers',
-  labelEmptyValue: 'All Suppliers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Supplier 1',
-    label: 'Supplier 1'
-  }, {
-    value: 'Supplier 2',
-    label: 'Supplier 2'
-  }, {
-    value: 'Supplier 3',
-    label: 'Supplier 3'
-  }]
-}, {
-  name: 'EventTimeframe',
-  label: 'Select Event Timeframe',
-  labelEmptyValue: 'All Dates Types',
-  disabled: false,
-  required: false,
-  inputType: 'periodpicker',
-  periodPickerSelectedValue: [{
-    value: 'quarter',
-    label: 'Event Quarter'
-  }],
-  selectedValue: 'Q2-2024',
-  placeHolder: 'Select Dates Types...',
-  dropdownOptions: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }, {
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'quarter',
-    label: 'Quarter'
-  }, {
-    value: 'year',
-    label: 'Year'
-  }],
-  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
-  availableMonths: ['Jan 2024'],
-  defaultValueYears: {
-    value: '2024',
-    label: '2024'
-  }
-}];
-const PeriodPickerWithInitialMonthData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38',
-    label: 'Large Selling Event #37 and 38'
-  }]
-}, {
-  name: 'EventName',
-  label: 'Event Names',
-  labelEmptyValue: 'All Event Names',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Event Name 1',
-    label: 'Event Name 1'
-  }, {
-    value: 'Event Name 2',
-    label: 'Event Name 2'
-  }, {
-    value: 'Event Name 3',
-    label: 'Event Name 3'
-  }]
-}, {
-  name: 'EventTimeframe',
-  label: 'Select Event Timeframe',
-  labelEmptyValue: 'All Dates Types',
-  disabled: false,
-  required: false,
-  inputType: 'periodpicker',
-  periodPickerSelectedValue: [{
-    value: 'month',
-    label: 'Event Month'
-  }],
-  selectedValue: 'January | 2024',
-  placeHolder: 'Select Dates Types...',
-  dropdownOptions: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }, {
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'quarter',
-    label: 'Quarter'
-  }, {
-    value: 'year',
-    label: 'Year'
-  }],
-  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
-  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
-  defaultValueYears: {
-    value: '2024',
-    label: '2024'
-  }
-}, {
-  name: 'Supplier',
-  label: 'Suppliers',
-  labelEmptyValue: 'All Suppliers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Supplier 1',
-    label: 'Supplier 1'
-  }, {
-    value: 'Supplier 2',
-    label: 'Supplier 2'
-  }, {
-    value: 'Supplier 3',
-    label: 'Supplier 3'
-  }]
-}];
-const PeriodPickerWithInitialYearData = [{
-  name: 'Retailer',
-  label: 'Retailers',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event types',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: 'Type ...',
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3 Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11 NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38',
-    label: 'Large Selling Event #37 and 38'
-  }]
-}, {
-  name: 'EventName',
-  label: 'Event Names',
-  labelEmptyValue: 'All Event Names',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Event Name 1',
-    label: 'Event Name 1'
-  }, {
-    value: 'Event Name 2',
-    label: 'Event Name 2'
-  }, {
-    value: 'Event Name 3',
-    label: 'Event Name 3'
-  }]
-}, {
-  name: 'Supplier',
-  label: 'Suppliers',
-  labelEmptyValue: 'All Suppliers',
-  disabled: false,
-  required: false,
-  inputType: 'dropdownMulti',
-  placeHolder: '',
-  dropdownOptions: [{
-    value: 'Supplier 1',
-    label: 'Supplier 1'
-  }, {
-    value: 'Supplier 2',
-    label: 'Supplier 2'
-  }, {
-    value: 'Supplier 3',
-    label: 'Supplier 3'
-  }]
-}, {
-  name: 'EventTimeframe',
-  label: 'Select Event Timeframe',
-  labelEmptyValue: 'All Dates Types',
-  disabled: false,
-  required: false,
-  inputType: 'periodpicker',
-  periodPickerSelectedValue: [{
-    value: 'year',
-    label: 'Event Year'
-  }],
-  selectedValue: '2024',
-  placeHolder: 'Select Dates Types...',
-  dropdownOptions: [{
-    value: 'daterange',
-    label: 'Event Start Date'
-  }, {
-    value: 'month',
-    label: 'Month'
-  }, {
-    value: 'quarter',
-    label: 'Quarter'
-  }, {
-    value: 'year',
-    label: 'Year'
-  }],
-  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
-  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
-  defaultValueYears: {
-    value: '2024',
-    label: '2024'
-  }
-}];
-const NewItemCenterNoShowXClearOptionData = [{
-  name: 'Retailer',
-  label: 'Retailer',
-  labelEmptyValue: 'All Retailers',
-  disabled: false,
-  required: true,
-  inputType: 'dropdown',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }, {
-    value: 'Hannaford',
-    label: 'Hannaford'
-  }, {
-    value: 'Giant Food',
-    label: 'Giant Food'
-  }, {
-    value: 'Stop&Shop',
-    label: 'Stop&Shop'
-  }, {
-    value: 'The Giant Company',
-    label: 'The Giant Company'
-  }],
-  defaultValue: [{
-    value: 'Food Lion',
-    label: 'Food Lion'
-  }]
-}, {
-  name: 'EventType',
-  label: 'Event type',
-  labelEmptyValue: 'All Event types',
-  disabled: false,
-  required: false,
-  inputType: 'dropdown',
-  placeHolder: 'Type ...',
-  xIconShow: false,
-  dropdownOptions: [{
-    value: 'Large Selling Event #10 POD3',
-    label: 'Large Selling Event #10 POD3'
-  }, {
-    value: 'NIC 11_23 Cycle 11',
-    label: 'NIC 11_23 Cycle 11'
-  }, {
-    value: 'Large Selling Event #37 and 38  Event #37 and 38',
-    label: 'Large Selling Event #37 and 38  Event #37 and 38'
-  }]
-  // defaultValue: { value: 'Large Selling Event #10 POD3', label: 'Large Selling Event #10 POD3' },
-}, {
-  name: 'DateRange',
-  label: 'Date Range',
-  labelEmptyValue: 'All Dates',
-  disabled: false,
-  required: true,
-  inputType: 'datepicker',
-  showInfo: true,
-  placeHolder: 'MM/DD/YYYY'
-}];
-var _default = exports.default = {
-  title: 'SAG BI/FilterPanel',
-  component: _FilterPanel.default,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the form'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the form'
-    },
-    borderColor: {
-      name: 'borderColor',
-      description: 'Sets the border color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    okButtonBackgroundColor: {
-      name: 'okButtonBackgroundColor',
-      description: 'Sets the okButtonBackgroundColor color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    okButtonHoverColor: {
-      name: 'okButtonHoverColor',
-      description: 'Sets the ok Button Hover color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    resetButtonBackgroundColor: {
-      name: 'resetButtonBackgroundColor',
-      description: 'Sets the reset Button Background Color ',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    resetButtonHoverColor: {
-      name: 'resetButtonHoverColor',
-      description: 'Sets the reset Button Hover color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    onOkClick: {
-      name: 'onOkClick',
-      action: 'onOkClick',
-      description: 'Click on Ok event'
-    },
-    onResetClick: {
-      name: 'onResetClick',
-      action: 'onResetClick',
-      description: 'Click  onResetClick event'
-    },
-    onItemValueChanged: {
-      name: 'onItemValueChanged',
-      action: 'onItemValueChanged',
-      description: 'onChange event  '
-    },
-    fieldsData: {
-      description: 'array [] of objects: supported inputTypes: dropdown, dropdownMulti, "datepicker", periodpicker  '
-    },
-    disableOKButton: {
-      name: 'disableOKButton',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disable OK Button'
-    },
-    className: {
-      name: 'className',
-      control: {
-        type: 'text'
-      },
-      description: 'name of the class'
-    },
-    showShadow: {
-      name: 'showShadow',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show or hide Shadow'
-    },
-    tooltipTextGoButton: {
-      name: 'tooltipTextGoButton',
-      control: {
-        type: 'text'
-      },
-      description: 'tooltip Text Go Button, if emty string, tooltip will not be shown'
-    }
-  }
-};
-const Template = args => <_FilterPanel.default {...args} />;
-const DisableOKButton = exports.DisableOKButton = Template.bind({});
-DisableOKButton.args = {
-  fieldsData: NewItemCenterData,
-  width: '300px',
-  height: '800px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: true,
-  tooltipTextGoButton: 'Please select all required fields'
-};
-const MultiDropdown = exports.MultiDropdown = Template.bind({});
-MultiDropdown.args = {
-  fieldsData: NewItemCenterMultiData,
-  width: '400px',
-  height: '800px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false
-};
-const FilterPanelBlue = exports.FilterPanelBlue = Template.bind({});
-FilterPanelBlue.args = {
-  fieldsData: NewItemCenterData,
-  width: '50%',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: true,
-  tooltipTextGoButton: 'Please select all required fields'
-};
-const NewItemCenterEventsPage = exports.NewItemCenterEventsPage = Template.bind({});
-NewItemCenterEventsPage.args = {
-  fieldsData: NewItemCenterData,
-  width: '400px',
-  height: '800px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false
-};
-const FilterQuatertlyReport = exports.FilterQuatertlyReport = Template.bind({});
-FilterQuatertlyReport.args = {
-  fieldsData: QuatertlyData,
-  width: '300px',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false,
-  availableQuarters: ['Q1-2024', 'Q2-2024', 'Q3-2024'],
-  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024', 'Apr 2024', 'May 2024', 'Jun 2024', 'Jul 2024', 'Aug 2024', 'Sep 2024'],
-  availableYears: ['2024', '2025', '2026']
-};
-const NoXClearOptionPage = exports.NoXClearOptionPage = Template.bind({});
-NoXClearOptionPage.args = {
-  fieldsData: NewItemCenterNoShowXClearOptionData,
-  width: '400px',
-  height: '800px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false
-};
-const PeriodPickerWithInitialValueDaterange = exports.PeriodPickerWithInitialValueDaterange = Template.bind({});
-PeriodPickerWithInitialValueDaterange.args = {
-  fieldsData: PeriodPickerWithInitialDaterangeData,
-  width: '300px',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false,
-  useExternalFilterState: true
-};
-const PeriodPickerWithInitialValueQuarter = exports.PeriodPickerWithInitialValueQuarter = Template.bind({});
-PeriodPickerWithInitialValueQuarter.args = {
-  fieldsData: PeriodPickerWithInitialQuarterData,
-  width: '300px',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false,
-  useExternalFilterState: true
-};
-const PeriodPickerWithInitialValueMonth = exports.PeriodPickerWithInitialValueMonth = Template.bind({});
-PeriodPickerWithInitialValueMonth.args = {
-  fieldsData: PeriodPickerWithInitialMonthData,
-  width: '300px',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false,
-  useExternalFilterState: true
-};
-const PeriodPickerWithInitialValueYear = exports.PeriodPickerWithInitialValueYear = Template.bind({});
-PeriodPickerWithInitialValueYear.args = {
-  fieldsData: PeriodPickerWithInitialYearData,
-  width: '300px',
-  height: '700px',
-  okButtonBackgroundColor: '#229E38',
-  okButtonHoverColor: '#92CF17',
-  resetButtonHoverColor: '#E8F5EB',
-  borderColor: '#066768',
-  disableOKButton: false,
-  useExternalFilterState: true,
-  showShadow: false
-};