@knovator/pagecreator-admin 1.1.6 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.cjs +47 -26
  2. package/index.js +47 -26
  3. package/package.json +1 -1
  4. package/src/lib/constants/common.d.ts +3 -0
  5. package/src/lib/types/components.d.ts +4 -1
package/index.cjs CHANGED
@@ -1774,6 +1774,9 @@ const TRANSLATION_PAIRS_WIDGET = {
1774
1774
  minWidth: 'Width should be greater than 0',
1775
1775
  minHeight: 'Height should be greater than 0',
1776
1776
  deleteTitle: 'Are you sure you want to delete this item?',
1777
+ htmlContent: 'HTML',
1778
+ htmlContentPlaceholder: 'Enter your html',
1779
+ htmlContentRequired: 'html is required',
1777
1780
  textContent: 'Text',
1778
1781
  textContentRequired: 'Text is required',
1779
1782
  textContentInfo: 'HTML is supported',
@@ -3181,7 +3184,7 @@ const Table = ({
3181
3184
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3182
3185
  // @ts-ignore
3183
3186
  onClick: () => actions.edit(item)
3184
- }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)) : null, actions && actions.delete && typeof actions.delete === 'function' && /*#__PURE__*/React__default["default"].createElement("button", {
3187
+ }, /*#__PURE__*/React__default["default"].createElement(Pencil, null)) : null, actions && actions.delete && typeof actions.delete === 'function' && !!item['canDel'] !== false && /*#__PURE__*/React__default["default"].createElement("button", {
3185
3188
  className: "khb_actions-delete",
3186
3189
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3187
3190
  // @ts-ignore
@@ -6637,26 +6640,20 @@ const ItemsAccordian = ({
6637
6640
  }, Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => {
6638
6641
  var _a, _b, _c, _d, _e, _f, _g, _h;
6639
6642
  return /*#__PURE__*/React__default["default"].createElement(Input, {
6640
- rest: register(`${name}.${index}.titles.${lang.code}`, {
6641
- required: commonTranslations.titleRequired
6642
- }),
6643
+ rest: register(`${name}.${index}.titles.${lang.code}`),
6643
6644
  label: commonTranslations.title + ` (${lang.name})`,
6644
6645
  error: ((_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) ? ((_h = (_g = (_f = (_e = (_d = errors[name]) === null || _d === void 0 ? void 0 : _d[index]) === null || _e === void 0 ? void 0 : _e['titles']) === null || _f === void 0 ? void 0 : _f[lang.code]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString()) + ` (${lang.name})` : '',
6645
6646
  type: "text",
6646
6647
  className: "w-full p-2",
6647
- placeholder: commonTranslations.titlePlaceholder + ` (${lang.name})`,
6648
- required: true
6648
+ placeholder: commonTranslations.titlePlaceholder + ` (${lang.name})`
6649
6649
  });
6650
6650
  })) : /*#__PURE__*/React__default["default"].createElement(Input, {
6651
- rest: register(`${name}.${index}.title`, {
6652
- required: commonTranslations.titleRequired
6653
- }),
6651
+ rest: register(`${name}.${index}.title`),
6654
6652
  label: commonTranslations.title,
6655
6653
  error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['title']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
6656
6654
  type: "text",
6657
6655
  className: "w-full p-2",
6658
- placeholder: commonTranslations.titlePlaceholder,
6659
- required: true
6656
+ placeholder: commonTranslations.titlePlaceholder
6660
6657
  }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => /*#__PURE__*/React__default["default"].createElement(Input, {
6661
6658
  rest: register(`${name}.${index}.subtitles.${lang.code}`),
6662
6659
  label: widgetTranslations.subtitle + ` (${lang.name})`,
@@ -6927,6 +6924,8 @@ const constants = {
6927
6924
  fixedCardWidgetTypeValue: 'FixedCard',
6928
6925
  carouselWidgetTypeValue: 'Carousel',
6929
6926
  imageItemsTypeValue: 'Image',
6927
+ textWidgetTypeValue: 'Text',
6928
+ htmlWidgetTypeValue: 'HTML',
6930
6929
  tabsAccessor: 'tabs',
6931
6930
  webItems: 'webItems',
6932
6931
  mobileItems: 'mobileItems',
@@ -6989,12 +6988,15 @@ const WidgetForm = ({
6989
6988
  if (data && formState === 'UPDATE') {
6990
6989
  const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
6991
6990
  setSelectedWidgetType(widgetType);
6992
- if ((data === null || data === void 0 ? void 0 : data.itemsType) !== constants.imageItemsTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === "Text") {
6991
+ if ((data === null || data === void 0 ? void 0 : data.itemsType) !== constants.imageItemsTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.textWidgetTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.htmlWidgetTypeValue) {
6993
6992
  setItemsEnabled(false);
6994
6993
  }
6995
6994
  if ((data === null || data === void 0 ? void 0 : data.collectionName) !== constants.imageItemsTypeValue && itemsTypes && itemsTypes.length > 0) {
6996
6995
  setSelectedCollectionType(itemsTypes.find(item => item.value === (data === null || data === void 0 ? void 0 : data.collectionName)));
6997
6996
  }
6997
+ if ((data === null || data === void 0 ? void 0 : data.widgetType) === constants.textWidgetTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.htmlWidgetTypeValue) {
6998
+ setItemsEnabled(false);
6999
+ }
6998
7000
  }
6999
7001
  }, [data, formState, itemsTypes, widgetTypes]);
7000
7002
  React.useEffect(() => {
@@ -7069,8 +7071,10 @@ const WidgetForm = ({
7069
7071
  }
7070
7072
  const getFirstItemTypeValue = React.useCallback(widgetType => {
7071
7073
  const derivedItemTypes = widgetType === constants.tabsWidgetTypeValue ? itemsTypes.filter(item => item.label !== constants.imageItemsTypeValue) : itemsTypes;
7072
- return derivedItemTypes[0];
7073
- }, [itemsTypes]);
7074
+ const firstItemType = derivedItemTypes[0];
7075
+ setValue(constants.itemTypeAccessor, firstItemType === null || firstItemType === void 0 ? void 0 : firstItemType.value);
7076
+ return firstItemType;
7077
+ }, [itemsTypes, setValue]);
7074
7078
  const getFirstWidgetTypeValue = React.useCallback(() => {
7075
7079
  return widgetTypes[0].value;
7076
7080
  }, [widgetTypes]);
@@ -7079,14 +7083,20 @@ const WidgetForm = ({
7079
7083
  if (name === constants.widgetTypeAccessor) {
7080
7084
  const widgetType = widgetTypes.find(type => type.value === value[name]);
7081
7085
  setSelectedWidgetType(widgetType);
7082
- if (widgetType && [constants.fixedCardWidgetTypeValue, constants.carouselWidgetTypeValue].includes(widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) && !selectedCollectionType) {
7086
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.textWidgetTypeValue || (widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.htmlWidgetTypeValue) {
7087
+ setItemsEnabled(false);
7088
+ } else {
7083
7089
  setItemsEnabled(true);
7084
- } else setItemsEnabled(false);
7085
- if (value[name] === constants.tabsWidgetTypeValue) {
7090
+ }
7091
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.carouselWidgetTypeValue || (widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.fixedCardWidgetTypeValue) {
7092
+ setValue(constants.itemTypeAccessor, "Image");
7093
+ }
7094
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.tabsWidgetTypeValue) {
7086
7095
  const firstItemType = getFirstItemTypeValue(value[name]);
7087
7096
  if (firstItemType) {
7088
7097
  setSelectedCollectionType(firstItemType);
7089
7098
  }
7099
+ setValue(constants.itemTypeAccessor, firstItemType === null || firstItemType === void 0 ? void 0 : firstItemType.value);
7090
7100
  }
7091
7101
  } else if (name === constants.itemTypeAccessor) {
7092
7102
  if (value[constants.itemTypeAccessor] === constants.imageItemsTypeValue) {
@@ -7100,7 +7110,7 @@ const WidgetForm = ({
7100
7110
  } else if ((name === null || name === void 0 ? void 0 : name.includes(constants.tabsAccessor)) && Array.isArray(value[constants.tabsAccessor])) {
7101
7111
  setTabCollectionItems(value[constants.tabsAccessor].map(tabItem => tabItem[constants.tabCollectionItemsAccessor]));
7102
7112
  }
7103
- }, [getFirstItemTypeValue, itemsTypes, widgetTypes, selectedCollectionType]);
7113
+ }, [getFirstItemTypeValue, itemsTypes, setValue, widgetTypes, selectedCollectionType]);
7104
7114
  const validateTabs = tabsData => {
7105
7115
  const isLanguagesProvided = Array.isArray(languages) && languages.length > 0;
7106
7116
  let isTabsValid = true;
@@ -7277,25 +7287,36 @@ const WidgetForm = ({
7277
7287
  label: widgetTranslations.autoPlay,
7278
7288
  accessor: 'autoPlay',
7279
7289
  type: 'checkbox',
7280
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Carousel',
7290
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue,
7281
7291
  switchClass: switchClass
7282
7292
  }, {
7283
7293
  label: widgetTranslations.textContent,
7284
7294
  accessor: 'textContent',
7285
- required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Text',
7295
+ required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.textWidgetTypeValue,
7286
7296
  type: customInputs && customInputs['textContent'] ? undefined : 'text',
7287
7297
  placeholder: widgetTranslations.textContentPlaceholder,
7288
7298
  validations: {
7289
7299
  required: widgetTranslations.textContentRequired
7290
7300
  },
7291
7301
  info: widgetTranslations.textContentInfo,
7292
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Text',
7302
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.textWidgetTypeValue,
7293
7303
  Input: customInputs && customInputs['textContent'] ? customInputs['textContent'] : undefined
7304
+ }, {
7305
+ label: widgetTranslations.htmlContent,
7306
+ accessor: 'htmlContent',
7307
+ required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
7308
+ type: customInputs && customInputs['htmlContent'] ? undefined : 'textarea',
7309
+ placeholder: widgetTranslations.htmlContentPlaceholder,
7310
+ validations: {
7311
+ required: widgetTranslations.htmlContentRequired
7312
+ },
7313
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
7314
+ Input: customInputs && customInputs['htmlContent'] ? customInputs['htmlContent'] : undefined
7294
7315
  }, {
7295
7316
  label: widgetTranslations.itemsType,
7296
7317
  required: true,
7297
7318
  editable: false,
7298
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7319
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7299
7320
  accessor: constants.itemTypeAccessor,
7300
7321
  type: 'select',
7301
7322
  validations: {
@@ -7311,7 +7332,7 @@ const WidgetForm = ({
7311
7332
  label: widgetTranslations.webPerRow,
7312
7333
  accessor: 'webPerRow',
7313
7334
  type: 'number',
7314
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7335
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7315
7336
  required: true,
7316
7337
  placeholder: widgetTranslations.webPerRowPlaceholder,
7317
7338
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1',
@@ -7326,7 +7347,7 @@ const WidgetForm = ({
7326
7347
  label: widgetTranslations.tabletPerRow,
7327
7348
  accessor: 'tabletPerRow',
7328
7349
  type: 'number',
7329
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7350
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7330
7351
  required: true,
7331
7352
  placeholder: widgetTranslations.tabletPerRowPlaceholder,
7332
7353
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-left-1',
@@ -7341,7 +7362,7 @@ const WidgetForm = ({
7341
7362
  label: widgetTranslations.mobilePerRow,
7342
7363
  accessor: 'mobilePerRow',
7343
7364
  type: 'number',
7344
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7365
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text' && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'HTML',
7345
7366
  required: true,
7346
7367
  placeholder: widgetTranslations.mobilePerRowPlaceholder,
7347
7368
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1 khb_padding-left-1',
@@ -7411,7 +7432,7 @@ const WidgetForm = ({
7411
7432
  onDragEnd: onCollectionIndexChange,
7412
7433
  formatItem: formatListItem,
7413
7434
  listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
7414
- }), itemsEnabled && selectedCollectionType === undefined && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
7435
+ }), itemsEnabled && (selectedCollectionType === undefined || selectedWidgetType.value === 'Carousel' || selectedWidgetType.value === 'FixedCard') && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
7415
7436
  languages: languages,
7416
7437
  clearError: clearErrors,
7417
7438
  collapseId: constants.webItems,
package/index.js CHANGED
@@ -1762,6 +1762,9 @@ const TRANSLATION_PAIRS_WIDGET = {
1762
1762
  minWidth: 'Width should be greater than 0',
1763
1763
  minHeight: 'Height should be greater than 0',
1764
1764
  deleteTitle: 'Are you sure you want to delete this item?',
1765
+ htmlContent: 'HTML',
1766
+ htmlContentPlaceholder: 'Enter your html',
1767
+ htmlContentRequired: 'html is required',
1765
1768
  textContent: 'Text',
1766
1769
  textContentRequired: 'Text is required',
1767
1770
  textContentInfo: 'HTML is supported',
@@ -3169,7 +3172,7 @@ const Table = ({
3169
3172
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3170
3173
  // @ts-ignore
3171
3174
  onClick: () => actions.edit(item)
3172
- }, /*#__PURE__*/React.createElement(Pencil, null)) : null, actions && actions.delete && typeof actions.delete === 'function' && /*#__PURE__*/React.createElement("button", {
3175
+ }, /*#__PURE__*/React.createElement(Pencil, null)) : null, actions && actions.delete && typeof actions.delete === 'function' && !!item['canDel'] !== false && /*#__PURE__*/React.createElement("button", {
3173
3176
  className: "khb_actions-delete",
3174
3177
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3175
3178
  // @ts-ignore
@@ -6625,26 +6628,20 @@ const ItemsAccordian = ({
6625
6628
  }, Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => {
6626
6629
  var _a, _b, _c, _d, _e, _f, _g, _h;
6627
6630
  return /*#__PURE__*/React.createElement(Input, {
6628
- rest: register(`${name}.${index}.titles.${lang.code}`, {
6629
- required: commonTranslations.titleRequired
6630
- }),
6631
+ rest: register(`${name}.${index}.titles.${lang.code}`),
6631
6632
  label: commonTranslations.title + ` (${lang.name})`,
6632
6633
  error: ((_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) ? ((_h = (_g = (_f = (_e = (_d = errors[name]) === null || _d === void 0 ? void 0 : _d[index]) === null || _e === void 0 ? void 0 : _e['titles']) === null || _f === void 0 ? void 0 : _f[lang.code]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString()) + ` (${lang.name})` : '',
6633
6634
  type: "text",
6634
6635
  className: "w-full p-2",
6635
- placeholder: commonTranslations.titlePlaceholder + ` (${lang.name})`,
6636
- required: true
6636
+ placeholder: commonTranslations.titlePlaceholder + ` (${lang.name})`
6637
6637
  });
6638
6638
  })) : /*#__PURE__*/React.createElement(Input, {
6639
- rest: register(`${name}.${index}.title`, {
6640
- required: commonTranslations.titleRequired
6641
- }),
6639
+ rest: register(`${name}.${index}.title`),
6642
6640
  label: commonTranslations.title,
6643
6641
  error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['title']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
6644
6642
  type: "text",
6645
6643
  className: "w-full p-2",
6646
- placeholder: commonTranslations.titlePlaceholder,
6647
- required: true
6644
+ placeholder: commonTranslations.titlePlaceholder
6648
6645
  }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => /*#__PURE__*/React.createElement(Input, {
6649
6646
  rest: register(`${name}.${index}.subtitles.${lang.code}`),
6650
6647
  label: widgetTranslations.subtitle + ` (${lang.name})`,
@@ -6915,6 +6912,8 @@ const constants = {
6915
6912
  fixedCardWidgetTypeValue: 'FixedCard',
6916
6913
  carouselWidgetTypeValue: 'Carousel',
6917
6914
  imageItemsTypeValue: 'Image',
6915
+ textWidgetTypeValue: 'Text',
6916
+ htmlWidgetTypeValue: 'HTML',
6918
6917
  tabsAccessor: 'tabs',
6919
6918
  webItems: 'webItems',
6920
6919
  mobileItems: 'mobileItems',
@@ -6977,12 +6976,15 @@ const WidgetForm = ({
6977
6976
  if (data && formState === 'UPDATE') {
6978
6977
  const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
6979
6978
  setSelectedWidgetType(widgetType);
6980
- if ((data === null || data === void 0 ? void 0 : data.itemsType) !== constants.imageItemsTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === "Text") {
6979
+ if ((data === null || data === void 0 ? void 0 : data.itemsType) !== constants.imageItemsTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.textWidgetTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.htmlWidgetTypeValue) {
6981
6980
  setItemsEnabled(false);
6982
6981
  }
6983
6982
  if ((data === null || data === void 0 ? void 0 : data.collectionName) !== constants.imageItemsTypeValue && itemsTypes && itemsTypes.length > 0) {
6984
6983
  setSelectedCollectionType(itemsTypes.find(item => item.value === (data === null || data === void 0 ? void 0 : data.collectionName)));
6985
6984
  }
6985
+ if ((data === null || data === void 0 ? void 0 : data.widgetType) === constants.textWidgetTypeValue || (data === null || data === void 0 ? void 0 : data.widgetType) === constants.htmlWidgetTypeValue) {
6986
+ setItemsEnabled(false);
6987
+ }
6986
6988
  }
6987
6989
  }, [data, formState, itemsTypes, widgetTypes]);
6988
6990
  useEffect(() => {
@@ -7057,8 +7059,10 @@ const WidgetForm = ({
7057
7059
  }
7058
7060
  const getFirstItemTypeValue = useCallback(widgetType => {
7059
7061
  const derivedItemTypes = widgetType === constants.tabsWidgetTypeValue ? itemsTypes.filter(item => item.label !== constants.imageItemsTypeValue) : itemsTypes;
7060
- return derivedItemTypes[0];
7061
- }, [itemsTypes]);
7062
+ const firstItemType = derivedItemTypes[0];
7063
+ setValue(constants.itemTypeAccessor, firstItemType === null || firstItemType === void 0 ? void 0 : firstItemType.value);
7064
+ return firstItemType;
7065
+ }, [itemsTypes, setValue]);
7062
7066
  const getFirstWidgetTypeValue = useCallback(() => {
7063
7067
  return widgetTypes[0].value;
7064
7068
  }, [widgetTypes]);
@@ -7067,14 +7071,20 @@ const WidgetForm = ({
7067
7071
  if (name === constants.widgetTypeAccessor) {
7068
7072
  const widgetType = widgetTypes.find(type => type.value === value[name]);
7069
7073
  setSelectedWidgetType(widgetType);
7070
- if (widgetType && [constants.fixedCardWidgetTypeValue, constants.carouselWidgetTypeValue].includes(widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) && !selectedCollectionType) {
7074
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.textWidgetTypeValue || (widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.htmlWidgetTypeValue) {
7075
+ setItemsEnabled(false);
7076
+ } else {
7071
7077
  setItemsEnabled(true);
7072
- } else setItemsEnabled(false);
7073
- if (value[name] === constants.tabsWidgetTypeValue) {
7078
+ }
7079
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.carouselWidgetTypeValue || (widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.fixedCardWidgetTypeValue) {
7080
+ setValue(constants.itemTypeAccessor, "Image");
7081
+ }
7082
+ if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.tabsWidgetTypeValue) {
7074
7083
  const firstItemType = getFirstItemTypeValue(value[name]);
7075
7084
  if (firstItemType) {
7076
7085
  setSelectedCollectionType(firstItemType);
7077
7086
  }
7087
+ setValue(constants.itemTypeAccessor, firstItemType === null || firstItemType === void 0 ? void 0 : firstItemType.value);
7078
7088
  }
7079
7089
  } else if (name === constants.itemTypeAccessor) {
7080
7090
  if (value[constants.itemTypeAccessor] === constants.imageItemsTypeValue) {
@@ -7088,7 +7098,7 @@ const WidgetForm = ({
7088
7098
  } else if ((name === null || name === void 0 ? void 0 : name.includes(constants.tabsAccessor)) && Array.isArray(value[constants.tabsAccessor])) {
7089
7099
  setTabCollectionItems(value[constants.tabsAccessor].map(tabItem => tabItem[constants.tabCollectionItemsAccessor]));
7090
7100
  }
7091
- }, [getFirstItemTypeValue, itemsTypes, widgetTypes, selectedCollectionType]);
7101
+ }, [getFirstItemTypeValue, itemsTypes, setValue, widgetTypes, selectedCollectionType]);
7092
7102
  const validateTabs = tabsData => {
7093
7103
  const isLanguagesProvided = Array.isArray(languages) && languages.length > 0;
7094
7104
  let isTabsValid = true;
@@ -7265,25 +7275,36 @@ const WidgetForm = ({
7265
7275
  label: widgetTranslations.autoPlay,
7266
7276
  accessor: 'autoPlay',
7267
7277
  type: 'checkbox',
7268
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Carousel',
7278
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.carouselWidgetTypeValue,
7269
7279
  switchClass: switchClass
7270
7280
  }, {
7271
7281
  label: widgetTranslations.textContent,
7272
7282
  accessor: 'textContent',
7273
- required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Text',
7283
+ required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.textWidgetTypeValue,
7274
7284
  type: customInputs && customInputs['textContent'] ? undefined : 'text',
7275
7285
  placeholder: widgetTranslations.textContentPlaceholder,
7276
7286
  validations: {
7277
7287
  required: widgetTranslations.textContentRequired
7278
7288
  },
7279
7289
  info: widgetTranslations.textContentInfo,
7280
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Text',
7290
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.textWidgetTypeValue,
7281
7291
  Input: customInputs && customInputs['textContent'] ? customInputs['textContent'] : undefined
7292
+ }, {
7293
+ label: widgetTranslations.htmlContent,
7294
+ accessor: 'htmlContent',
7295
+ required: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
7296
+ type: customInputs && customInputs['htmlContent'] ? undefined : 'textarea',
7297
+ placeholder: widgetTranslations.htmlContentPlaceholder,
7298
+ validations: {
7299
+ required: widgetTranslations.htmlContentRequired
7300
+ },
7301
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === constants.htmlWidgetTypeValue,
7302
+ Input: customInputs && customInputs['htmlContent'] ? customInputs['htmlContent'] : undefined
7282
7303
  }, {
7283
7304
  label: widgetTranslations.itemsType,
7284
7305
  required: true,
7285
7306
  editable: false,
7286
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7307
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7287
7308
  accessor: constants.itemTypeAccessor,
7288
7309
  type: 'select',
7289
7310
  validations: {
@@ -7299,7 +7320,7 @@ const WidgetForm = ({
7299
7320
  label: widgetTranslations.webPerRow,
7300
7321
  accessor: 'webPerRow',
7301
7322
  type: 'number',
7302
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7323
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7303
7324
  required: true,
7304
7325
  placeholder: widgetTranslations.webPerRowPlaceholder,
7305
7326
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1',
@@ -7314,7 +7335,7 @@ const WidgetForm = ({
7314
7335
  label: widgetTranslations.tabletPerRow,
7315
7336
  accessor: 'tabletPerRow',
7316
7337
  type: 'number',
7317
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7338
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
7318
7339
  required: true,
7319
7340
  placeholder: widgetTranslations.tabletPerRowPlaceholder,
7320
7341
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-left-1',
@@ -7329,7 +7350,7 @@ const WidgetForm = ({
7329
7350
  label: widgetTranslations.mobilePerRow,
7330
7351
  accessor: 'mobilePerRow',
7331
7352
  type: 'number',
7332
- show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text',
7353
+ show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Text' && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'HTML',
7333
7354
  required: true,
7334
7355
  placeholder: widgetTranslations.mobilePerRowPlaceholder,
7335
7356
  wrapperClassName: 'khb_grid-item-1of3 khb_padding-right-1 khb_padding-left-1',
@@ -7399,7 +7420,7 @@ const WidgetForm = ({
7399
7420
  onDragEnd: onCollectionIndexChange,
7400
7421
  formatItem: formatListItem,
7401
7422
  listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
7402
- }), itemsEnabled && selectedCollectionType === undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemsAccordian, {
7423
+ }), itemsEnabled && (selectedCollectionType === undefined || selectedWidgetType.value === 'Carousel' || selectedWidgetType.value === 'FixedCard') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemsAccordian, {
7403
7424
  languages: languages,
7404
7425
  clearError: clearErrors,
7405
7426
  collapseId: constants.webItems,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knovator/pagecreator-admin",
3
- "version": "1.1.6",
3
+ "version": "1.2.1",
4
4
  "dependencies": {
5
5
  "classnames": "^2.3.1",
6
6
  "react-beautiful-dnd": "^13.1.0",
package/src/lib/constants/common.d.ts CHANGED
@@ -102,6 +102,9 @@ declare const TRANSLATION_PAIRS_WIDGET: {
102
102
  minWidth: string;
103
103
  minHeight: string;
104
104
  deleteTitle: string;
105
+ htmlContent: string;
106
+ htmlContentPlaceholder: string;
107
+ htmlContentRequired: string;
105
108
  textContent: string;
106
109
  textContentRequired: string;
107
110
  textContentInfo: string;
package/src/lib/types/components.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { MutableRefObject } from 'react';
2
2
  import { DropResult } from 'react-beautiful-dnd';
3
- import { FieldValues, RegisterOptions, UseFormClearErrors, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
3
+ import { FieldValues, RegisterOptions, UseFormClearErrors, UseFormGetValues, UseFormSetValue, ValidationRule } from 'react-hook-form';
4
4
  import { Routes_Input } from './api';
5
5
  import { OptionType, FormActionTypes, PermissionsObj, ObjectType, LanguageType } from './common';
6
6
  export interface DNDItemsListProps {
@@ -143,6 +143,9 @@ export interface InputRendererProps {
143
143
  disabled?: boolean;
144
144
  }
145
145
  export interface WidgetTranslationPairs {
146
+ htmlContentRequired: string | ValidationRule<boolean> | undefined;
147
+ htmlContentPlaceholder: string | undefined;
148
+ htmlContent: string | undefined;
146
149
  itemsType: string;
147
150
  itemsTypePlaceholder: string;
148
151
  widgetType: string;