oolib 2.64.13 → 2.64.15

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 (18) hide show
  1. package/dist/components/Banners/bannerContext.d.ts +6 -0
  2. package/dist/components/Banners/bannerContext.js +154 -0
  3. package/dist/components/ImageInput/ImageInputContext.js +2 -2
  4. package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts +2 -1
  5. package/dist/components/ImageInput/comps/ImageUploadShell/index.js +29 -9
  6. package/dist/components/ImageInput/comps/Placeholder/index.js +4 -3
  7. package/dist/components/ImageInput/index.d.ts +1 -2
  8. package/dist/components/ImageInput/index.js +3 -2
  9. package/dist/components/MetaBlock/index.js +16 -1
  10. package/dist/components/VideoInput/index.js +2 -8
  11. package/dist/components/cards/ListContent/index.js +34 -32
  12. package/dist/components/cards/ListContent/styled.js +3 -10
  13. package/dist/components/cards/styled.js +2 -2
  14. package/dist/index.d.ts +2 -1
  15. package/dist/index.js +9 -2
  16. package/package.json +1 -1
  17. package/dist/utilsOolib/infoAlertBannerFnPlaceholder.d.ts +0 -4
  18. package/dist/utilsOolib/infoAlertBannerFnPlaceholder.js +0 -10
package/dist/components/Banners/bannerContext.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export const BannerContext: React.Context<any>;
2
+ export function BannerProvider({ children }: {
3
+ children: any;
4
+ }): React.JSX.Element;
5
+ export function useBannerContext(): any;
6
+ import React from "react";
package/dist/components/Banners/bannerContext.js ADDED
@@ -0,0 +1,154 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
37
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
38
+ if (ar || !(i in from)) {
39
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
40
+ ar[i] = from[i];
41
+ }
42
+ }
43
+ return to.concat(ar || Array.prototype.slice.call(from));
44
+ };
45
+ Object.defineProperty(exports, "__esModule", { value: true });
46
+ exports.useBannerContext = exports.BannerProvider = exports.BannerContext = void 0;
47
+ var react_1 = __importStar(require("react"));
48
+ exports.BannerContext = (0, react_1.createContext)();
49
+ var counter = 0;
50
+ // FEEDBACK:
51
+ // needs to be outside the BannerProvider, else it gets called twice.
52
+ // which wouldn't be a problem if this function was pure, but its not cuz of the counter.
53
+ // need to find an alt implementation to that.
54
+ // discussion on useReducer being pure: https://github.com/facebook/react/issues/16295
55
+ var bannerReducer = function (state, action) {
56
+ var newInfoState, newAlertState, newEntry, alreadyExistsIdx;
57
+ switch (action.type) {
58
+ case "ADD_ALERT":
59
+ var alertState = state.alertState;
60
+ counter = counter + 1;
61
+ newEntry = __assign({ id: "ALERT-".concat(counter) }, action.payload
62
+ // if an id is passed in the payload itelf, it will override the counter based id
63
+ );
64
+ // if a alert banner exists with the same id, as the new one coming in,
65
+ // we remove that first.
66
+ newAlertState = alertState.filter(function (d) { return d.id !== newEntry.id; });
67
+ alreadyExistsIdx = alertState.findIndex(function (d) { return d.id === newEntry.id; });
68
+ if (alreadyExistsIdx !== -1) {
69
+ alertState[alreadyExistsIdx] = newEntry;
70
+ newAlertState = alertState;
71
+ }
72
+ else {
73
+ newAlertState = __spreadArray([newEntry], alertState, true);
74
+ }
75
+ return __assign(__assign({}, state), { alertState: __spreadArray([
76
+ newEntry
77
+ ], alertState, true) });
78
+ case "ADD_INFO":
79
+ var infoState = state.infoState;
80
+ counter = counter + 1;
81
+ newEntry = __assign({ id: "INFO-".concat(counter) }, action.payload
82
+ // if an id is passed in the payload itelf, it will override the counter based id
83
+ );
84
+ // if a info banner exists with the same id, as the new one coming in,
85
+ // we remove that first.
86
+ alreadyExistsIdx = infoState.findIndex(function (d) { return d.id === newEntry.id; });
87
+ if (alreadyExistsIdx !== -1) {
88
+ infoState[alreadyExistsIdx] = newEntry;
89
+ newInfoState = infoState;
90
+ }
91
+ else {
92
+ newInfoState = __spreadArray([newEntry], infoState, true);
93
+ }
94
+ return __assign(__assign({}, state), { infoState: newInfoState });
95
+ case "REMOVE_ALERT":
96
+ newAlertState = state.alertState.filter(function (a) { return a.id !== action.id; });
97
+ return __assign(__assign({}, state), { alertState: newAlertState });
98
+ case "REMOVE_INFO":
99
+ newInfoState = state.infoState.filter(function (a) { return a.id !== action.id; });
100
+ return __assign(__assign({}, state), { infoState: newInfoState });
101
+ default:
102
+ return state;
103
+ }
104
+ };
105
+ var BannerProvider = function (_a) {
106
+ var children = _a.children;
107
+ var initialState = { alertState: [], infoState: [] };
108
+ var _b = (0, react_1.useReducer)(bannerReducer, initialState), BANNER_STATE = _b[0], BANNER_DISPATCH = _b[1];
109
+ var REMOVE_ALERT_BANNER = function (e, id) {
110
+ BANNER_DISPATCH({ type: "REMOVE_ALERT", id: id });
111
+ };
112
+ var REMOVE_INFO_BANNER = function (e, id) {
113
+ BANNER_DISPATCH({ type: "REMOVE_INFO", id: id });
114
+ };
115
+ // the config of bannner can either be passed as a object, or plain arguments.
116
+ var SET_INFO_BANNER = function (options_msg, color, timeOut) {
117
+ var options = {};
118
+ if (typeof options_msg === 'string') { //means it is the 'msg' config
119
+ options.msg = options_msg;
120
+ options.color = color || 'green'; //defaults to green
121
+ options.timeOut = timeOut;
122
+ }
123
+ else {
124
+ options = options_msg;
125
+ }
126
+ BANNER_DISPATCH({ type: "ADD_INFO", payload: options });
127
+ return "INFO-".concat(counter); //bannerId
128
+ };
129
+ var SET_ALERT_BANNER = function (options_msg, color, timeOut) {
130
+ var options = {};
131
+ if (typeof options_msg === 'string') { //means it is the 'msg' config
132
+ options.msg = options_msg;
133
+ options.color = color || 'green'; //defaults to green
134
+ options.timeOut = timeOut;
135
+ }
136
+ else {
137
+ options = options_msg;
138
+ }
139
+ BANNER_DISPATCH({ type: "ADD_ALERT", payload: options });
140
+ return "ALERT-".concat(counter); //bannerId
141
+ };
142
+ return (react_1.default.createElement(exports.BannerContext.Provider, { value: {
143
+ BANNER_STATE: BANNER_STATE,
144
+ SET_INFO_BANNER: SET_INFO_BANNER,
145
+ SET_ALERT_BANNER: SET_ALERT_BANNER,
146
+ REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
147
+ REMOVE_INFO_BANNER: REMOVE_INFO_BANNER
148
+ } }, children));
149
+ };
150
+ exports.BannerProvider = BannerProvider;
151
+ var useBannerContext = function () {
152
+ return (0, react_1.useContext)(exports.BannerContext);
153
+ };
154
+ exports.useBannerContext = useBannerContext;
package/dist/components/ImageInput/ImageInputContext.js CHANGED
@@ -35,8 +35,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
35
35
  exports.useImageInputContext = exports.ImageInputContextProvider = exports.ImageInputContext = void 0;
36
36
  var react_1 = __importStar(require("react"));
37
37
  var styled_components_1 = require("styled-components");
38
- var infoAlertBannerFnPlaceholder_1 = require("../../utilsOolib/infoAlertBannerFnPlaceholder");
39
38
  var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
39
+ var bannerContext_1 = require("../Banners/bannerContext");
40
40
  exports.ImageInputContext = (0, react_1.createContext)();
41
41
  var ImageInputContextProvider = function (_a) {
42
42
  var children = _a.children, value = _a.value, multiple = _a.multiple, allowedFormats = _a.allowedFormats, formatConvertConfig = _a.formatConvertConfig, folderName = _a.folderName, bucketEnv = _a.bucketEnv, onChange = _a.onChange, id = _a.id, aspectRatio = _a.aspectRatio, readOnly = _a.readOnly, enableCaptions = _a.enableCaptions, defaultImageSpread = _a.defaultImageSpread, invert = _a.invert, containerShape = _a.containerShape, stretchToFullHeight = _a.stretchToFullHeight, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, disableImageBorder = _a.disableImageBorder, omitEditorTools = _a.omitEditorTools, files = _a.files, showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, isInRTE = _a.isInRTE;
@@ -54,7 +54,7 @@ var ImageInputContextProvider = function (_a) {
54
54
  handleUploadProgess: handleUploadProgess,
55
55
  })) ||
56
56
  (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess }), upload = _c.mutate, isLoading = _c.isLoading; //for storybook purposes cuz we dont have access to mediaupload api here
57
- var SET_ALERT_BANNER = ((theme === null || theme === void 0 ? void 0 : theme.useBannerContext()) || (0, infoAlertBannerFnPlaceholder_1.infoAlertBannerFnPlaceholder)()).SET_ALERT_BANNER;
57
+ var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
58
58
  var _d = (0, react_1.useState)(0), noOfImagesUploading = _d[0], setNoOfImagesUploading = _d[1];
59
59
  var _e = (0, react_1.useState)(undefined), publicUrlBeingReplaced = _e[0], setPublicUrlBeingReplaced = _e[1];
60
60
  var handleUpload = function (_a) {
package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export default ImageUploadShell;
2
- declare function ImageUploadShell({ style, children, disabled }: {
2
+ declare function ImageUploadShell({ style, children, disabled, enableFilesDrop }: {
3
3
  style: any;
4
4
  children: any;
5
5
  disabled: any;
6
+ enableFilesDrop: any;
6
7
  }): React.JSX.Element;
7
8
  import React from "react";
package/dist/components/ImageInput/comps/ImageUploadShell/index.js CHANGED
@@ -35,20 +35,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
35
35
  var react_1 = __importStar(require("react"));
36
36
  var ImageInputContext_1 = require("../../ImageInputContext");
37
37
  var ImageUploadShell = function (_a) {
38
- var style = _a.style, children = _a.children, disabled = _a.disabled;
38
+ var style = _a.style, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop;
39
39
  var inputRef = (0, react_1.useRef)(null);
40
40
  var _b = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _b.handleUpload, onChange = _b.onChange, value = _b.value, id = _b.id, multiple = _b.multiple;
41
41
  if (disabled)
42
42
  return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
43
+ var fireHandleUpload = function (files) {
44
+ handleUpload({
45
+ files: files,
46
+ callback: function (_a) {
47
+ var successfulUploads = _a.successfulUploads;
48
+ onChange(id, multiple
49
+ ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
50
+ }
51
+ });
52
+ };
43
53
  return (react_1.default.createElement(react_1.default.Fragment, null,
44
- react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return handleUpload({
45
- files: e.target.files,
46
- callback: function (_a) {
47
- var successfulUploads = _a.successfulUploads;
48
- onChange(id, multiple
49
- ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
54
+ react_1.default.createElement("input", { type: "file", accept: "image/*", style: { display: 'none' }, ref: inputRef, onChange: function (e) { return fireHandleUpload(e.target.files); }, multiple: multiple }),
55
+ react_1.default.createElement("div", { onDragOver: enableFilesDrop
56
+ ? function (e) { return e.preventDefault(); }
57
+ : function () { }, onDrop: enableFilesDrop
58
+ ? function (e) {
59
+ var _a;
60
+ e.preventDefault();
61
+ e.stopPropagation();
62
+ if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
63
+ var filesToUpload = multiple
64
+ ? Array.from(e.dataTransfer.files)
65
+ : [Array.from(e.dataTransfer.files)[0]];
66
+ if (filesToUpload
67
+ .every(function (d) { return d.type.split('/')[0] === 'image'; })) {
68
+ fireHandleUpload(e.dataTransfer.files);
69
+ }
70
+ }
50
71
  }
51
- }); }, multiple: multiple }),
52
- react_1.default.createElement("div", { onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
72
+ : function () { }, onClick: function () { return inputRef.current.click(); }, style: { height: '100%', width: '100%' } }, children)));
53
73
  };
54
74
  exports.default = ImageUploadShell;
package/dist/components/ImageInput/comps/Placeholder/index.js CHANGED
@@ -83,12 +83,13 @@ var Placeholder = function (_a) {
83
83
  }),
84
84
  react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
85
85
  ? uploadProgress + "%"
86
- : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { multiple: multiple },
86
+ : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { enableFilesDrop: true, multiple: multiple },
87
87
  react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
88
88
  react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
89
- react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel))) : (react_1.default.createElement(react_1.Fragment, null,
89
+ react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
90
+ showOptionalLabelInDropzone && isRequired === false && react_1.default.createElement(Typo_1.SANS_0, null, "(optional)"))) : (react_1.default.createElement(react_1.Fragment, null,
90
91
  react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
91
- react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && !isRequired
92
+ react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
92
93
  ? "(optional)"
93
94
  : "")),
94
95
  react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel)))))))));
package/dist/components/ImageInput/index.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * - richInputHasValue (util)
7
7
  * - RichTextEditor
8
8
  */
9
- export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, showOptionalLabelInDropzone, isRequired, files, isInRTE }: {
9
+ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToFullHeight, aspectRatio, containerShape, invert, enableCaptions, defaultImageSpread, allowedFormats, folderName, bucketEnv, formatConvertConfig, dropzoneLabel, dropzoneSublabel, disableImageBorder, omitEditorTools, isRequired, files, isInRTE }: {
10
10
  id: any;
11
11
  value: any;
12
12
  onChange: any;
@@ -26,7 +26,6 @@ export function ImageInput({ id, value, onChange, readOnly, multiple, stretchToF
26
26
  dropzoneSublabel: any;
27
27
  disableImageBorder?: boolean;
28
28
  omitEditorTools?: any[];
29
- showOptionalLabelInDropzone: any;
30
29
  isRequired: any;
31
30
  files: any;
32
31
  isInRTE: any;
package/dist/components/ImageInput/index.js CHANGED
@@ -32,10 +32,11 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
32
32
  */
33
33
  function ImageInput(_a) {
34
34
  var id = _a.id, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, multiple = _a.multiple, _b = _a.stretchToFullHeight, stretchToFullHeight = _b === void 0 ? false : _b, _c = _a.aspectRatio, aspectRatio = _c === void 0 ? '5/3' : _c, _d = _a.containerShape, containerShape = _d === void 0 ? 'rectangle' : _d, //alt = circle
35
- invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'contain' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
36
- showOptionalLabelInDropzone = _a.showOptionalLabelInDropzone, isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
35
+ invert = _a.invert, _e = _a.enableCaptions, enableCaptions = _e === void 0 ? true : _e, _f = _a.defaultImageSpread, defaultImageSpread = _f === void 0 ? 'cover' : _f, _g = _a.allowedFormats, allowedFormats = _g === void 0 ? ["jpg", "jpeg", "png"] : _g, _h = _a.folderName, folderName = _h === void 0 ? 'images' : _h, bucketEnv = _a.bucketEnv, formatConvertConfig = _a.formatConvertConfig, dropzoneLabel = _a.dropzoneLabel, dropzoneSublabel = _a.dropzoneSublabel, _j = _a.disableImageBorder, disableImageBorder = _j === void 0 ? false : _j, _k = _a.omitEditorTools, omitEditorTools = _k === void 0 ? [] : _k, //can include : 'cover_contain' | 'rotate' | 'reposition'
36
+ isRequired = _a.isRequired, files = _a.files, //used by RTEImageInput
37
37
  isInRTE = _a.isInRTE;
38
38
  var props = arguments[0];
39
+ var showOptionalLabelInDropzone = !props.label && !props.sublabel;
39
40
  return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, __assign({}, {
40
41
  value: value,
41
42
  onChange: onChange,
package/dist/components/MetaBlock/index.js CHANGED
@@ -76,8 +76,23 @@ var MetaBlock = function (_a) {
76
76
  " ",
77
77
  react_1.default.createElement(OKELink_1.OKELink, { to: to, text: display, invert: invert, icon: icon })));
78
78
  };
79
+ /**
80
+ * basically we need a max width on each meta item
81
+ * only then the ellipsis would work. So the logic we
82
+ * use for now is, the max width is equally divided between
83
+ * the total number of meta items. However to calc this,
84
+ * we need to minus out the separator/s and flex gap/s
85
+ *
86
+ * Hence this semi complex calculation
87
+ */
88
+ var calcMaxWidthForEachMetaItem_HOR = function (value) {
89
+ var percent = (100 / value.length) + '%';
90
+ var pixelsToMinus = ((value.length - 1) * (2 + 0.3)) + 'rem'; // 2 = flex gap on the 2 sides of the separator, 0.3 = separator width
91
+ var toReturn = "calc(".concat(percent, " - ").concat(pixelsToMinus, ")");
92
+ return toReturn;
93
+ };
79
94
  return orientation === "horizontal" ? (react_1.default.createElement(StyledHorOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: i },
80
- react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: 100 / value.length + "%" } }, v.to
95
+ react_1.default.createElement(StyledMetaWrapper, { style: { maxWidth: calcMaxWidthForEachMetaItem_HOR(value) /*100 / value.length + "%"*/ } }, v.to
81
96
  ? genLink({ display: v.display, to: v.to, icon: v.icon })
82
97
  : genText({ icon: v.icon, display: v.display })),
83
98
  i + 1 === value.length ? null : (react_1.default.createElement(StyledSeparator, { invert: invert, disabled: disabled })))); }))) : (react_1.default.createElement(StyledVerOrientContainer, { align: align }, value.map(function (v, i) { return (react_1.default.createElement("div", { style: { maxWidth: "100%" } }, v.to
package/dist/components/VideoInput/index.js CHANGED
@@ -49,6 +49,7 @@ var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
49
49
  var ActionMenu_1 = require("../ActionMenu");
50
50
  var themes_1 = require("../../themes");
51
51
  var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
52
+ var bannerContext_1 = require("../Banners/bannerContext");
52
53
  var VideoInput = function (_a) {
53
54
  var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
54
55
  width = _a.width, height = _a.height;
@@ -59,14 +60,7 @@ var VideoInput = function (_a) {
59
60
  var _c = (0, react_1.useState)(false), showEmbedLinkModal = _c[0], setShowEmbedLinkModal = _c[1];
60
61
  var theme = (0, styled_components_1.useTheme)();
61
62
  var canPlay = function (value) { var _a; return react_player_1.default.canPlay(value && ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.publicUrl)); };
62
- var SET_ALERT_BANNER;
63
- if (theme && theme.useBannerContext) {
64
- var bannerContext = theme.useBannerContext();
65
- SET_ALERT_BANNER = bannerContext.SET_ALERT_BANNER;
66
- }
67
- else {
68
- SET_ALERT_BANNER = 'Incorrect video format' /* fallback value / function */;
69
- }
63
+ var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
70
64
  var _d = (0, react_1.useState)(undefined), uploadProgress = _d[0], setUploadProgress = _d[1];
71
65
  var inputRef = (0, react_1.useRef)();
72
66
  var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
package/dist/components/cards/ListContent/index.js CHANGED
@@ -22,9 +22,12 @@ var mediaDataExists_1 = require("../utils/mediaDataExists");
22
22
  var parseCardConfig_1 = require("../utils/parseCardConfig");
23
23
  var styled_js_1 = require("./styled.js");
24
24
  var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
25
+ var _EXPORTS_1 = require("../../../utils/_EXPORTS");
26
+ var mixins_1 = require("../../../themes/mixins");
25
27
  var ListContent = function (_a) {
26
28
  var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
27
29
  var theme = (0, styled_components_1.useTheme)();
30
+ var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
28
31
  var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
29
32
  var _c = (0, parseCardConfig_1.parseCardConfig)({
30
33
  config: config,
@@ -41,44 +44,43 @@ var ListContent = function (_a) {
41
44
  var mediaConfigExists = config.video || config.image;
42
45
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
43
46
  react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
44
- react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */ },
47
+ react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */, actions: actions },
45
48
  react_1.default.createElement(styled_js_1.StyledHeader, null,
46
- react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, null,
47
- cardLabel && (react_1.default.createElement("div", { title: cardLabel },
48
- react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
49
- statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
50
- title ? (react_1.default.createElement("div", { style: {
51
- display: "flex",
52
- alignItems: "end",
53
- } },
49
+ (cardLabel || statusTag) &&
50
+ react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, { style: { maxWidth: '100%', paddingBottom: '0.7rem' } },
51
+ cardLabel && (react_1.default.createElement("div", { title: cardLabel, style: { maxWidth: '100%' } },
52
+ react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
53
+ statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
54
+ title ? (react_1.default.createElement("div", { style: { flexGrow: 1 } },
54
55
  react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
55
56
  react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
56
57
  react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
57
58
  (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
58
59
  react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
59
- variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
60
- !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
61
- react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
62
- (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
63
- react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
64
- react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
65
- react_1.default.createElement("div", { style: {
66
- position: "absolute",
67
- top: 0,
68
- left: 0,
69
- width: "100%",
70
- height: "100%",
71
- } })))),
72
- (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
73
- // <div
74
- // // style={{
75
- // // width: "14rem",
76
- // // }}
77
- // >
78
- react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
79
- // </div>
80
- )),
60
+ variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
61
+ mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, null,
62
+ !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
63
+ react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
64
+ (0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
65
+ react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
66
+ react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
67
+ react_1.default.createElement("div", { style: {
68
+ position: "absolute",
69
+ top: 0,
70
+ left: 0,
71
+ width: "100%",
72
+ height: "100%",
73
+ } })))),
74
+ (0, mediaDataExists_1.imageDataExists)(image) > 0 && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
75
+ // <div
76
+ // // style={{
77
+ // // width: "14rem",
78
+ // // }}
79
+ // >
80
+ react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
81
+ // </div>
82
+ ))),
81
83
  actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" })))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
82
- react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: 60, imageTitle: title })))))));
84
+ react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title })))))));
83
85
  };
84
86
  exports.ListContent = ListContent;
package/dist/components/cards/ListContent/styled.js CHANGED
@@ -15,19 +15,12 @@ var Typo_1 = require("../../Typo");
15
15
  var styled_1 = require("../styled");
16
16
  exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n #CardPlaceholder {\n opacity: 1;\n }\n }\n"], ["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n #CardPlaceholder {\n opacity: 1;\n }\n }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
17
17
  exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"])));
18
- exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n gap: .7rem;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n gap: .7rem;\n"])));
18
+ exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n \n min-width: 0;\n flex-grow: 1;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n \n min-width: 0;\n flex-grow: 1;\n"])));
19
19
  /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
20
- var mediaPadding = 20;
21
20
  var mediaContainerWidth = 70;
22
21
  var mediaContainerWidth_SM = 60;
23
- exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: auto;\n padding-right: ", ";\n position: relative;\n ", " {\n padding-right: ", ";\n }\n"], ["\n width: auto;\n padding-right: ", ";\n position: relative;\n ", " {\n padding-right: ", ";\n }\n"])), function (_a) {
24
- var mediaConfigExists = _a.mediaConfigExists;
25
- return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth, "px");
26
- }, (0, mixins_1.mediaQuery)("sm"), function (_a) {
27
- var mediaConfigExists = _a.mediaConfigExists;
28
- return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth_SM, "px");
29
- });
30
- exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: center;\n align-items: flex-end;\n position: absolute;\n row-gap: 1rem;\n column-gap: 0;\n right: 0;\n top: 0;\n transform: translateY(0);\n padding: 0 ", "px;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: center;\n align-items: flex-end;\n position: absolute;\n row-gap: 1rem;\n column-gap: 0;\n right: 0;\n top: 0;\n transform: translateY(0);\n padding: 0 ", "px;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
22
+ exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: auto;\n display: flex;\n gap:2rem;\n position: relative;\n \n"], ["\n width: auto;\n display: flex;\n gap:2rem;\n position: relative;\n \n"])));
23
+ exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
31
24
  exports.StyledMediaMask = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n height: 84px;\n width: ", "px;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n height: 84px;\n width: ", "px;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
32
25
  exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"], ["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
33
26
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/dist/components/cards/styled.js CHANGED
@@ -34,10 +34,10 @@ var Typo_1 = require("../Typo");
34
34
  var utilsOolib_1 = require("../../utilsOolib");
35
35
  var themes_1 = require("../../themes");
36
36
  /** -- this bit is common for CardContent, ListContent and CardEmbed */
37
- exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n \n ", " \n"], ["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n \n ", " \n"
37
+ exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n ", " \n"], ["\n ", ";\n ", " \n"
38
38
  /** -- END this bit is common for CardContent, ListContent and CardEmbed */
39
39
  /** --- this bit handles the entire title underline hover animation --- */
40
- ])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"), function (_a) {
40
+ ])), mixins_1.ellipsis, function (_a) {
41
41
  var disabled = _a.disabled;
42
42
  return disabled && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), themes_1.colors.greyColor40);
43
43
  });
package/dist/index.d.ts CHANGED
@@ -11,7 +11,6 @@ export * from "./components/Container";
11
11
  export * from "./components/Wrappers";
12
12
  export * from "./components/Switches";
13
13
  export * from "./components/TabBar";
14
- export * from "./components/Banners";
15
14
  export * from "./components/RadioAndCheckbox";
16
15
  export * from "./components/Margins";
17
16
  export * from "./components/Paddings";
@@ -51,3 +50,5 @@ export { ImageInput } from "./components/ImageInput";
51
50
  export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
52
51
  export { default as VideoInput } from "./components/VideoInput";
53
52
  export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
53
+ export { BannerAlert, BannerInfo } from "./components/Banners";
54
+ export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
package/dist/index.js CHANGED
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
20
+ exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
21
  //css and styling related ( styled-components )
22
22
  var globalStyles_1 = require("./globalStyles");
23
23
  Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -45,7 +45,6 @@ __exportStar(require("./components/Container"), exports);
45
45
  __exportStar(require("./components/Wrappers"), exports);
46
46
  __exportStar(require("./components/Switches"), exports);
47
47
  __exportStar(require("./components/TabBar"), exports);
48
- __exportStar(require("./components/Banners"), exports);
49
48
  __exportStar(require("./components/RadioAndCheckbox"), exports);
50
49
  __exportStar(require("./components/Margins"), exports);
51
50
  __exportStar(require("./components/Paddings"), exports);
@@ -123,3 +122,11 @@ var ProfileImageInput_1 = require("./components/ImageInput/derivedComps/ProfileI
123
122
  Object.defineProperty(exports, "ProfileImageInput", { enumerable: true, get: function () { return ProfileImageInput_1.ProfileImageInput; } });
124
123
  var VideoInput_1 = require("./components/VideoInput");
125
124
  Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });
125
+ //banners
126
+ var Banners_1 = require("./components/Banners");
127
+ Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });
128
+ Object.defineProperty(exports, "BannerInfo", { enumerable: true, get: function () { return Banners_1.BannerInfo; } });
129
+ var bannerContext_1 = require("./components/Banners/bannerContext");
130
+ Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
131
+ Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
132
+ Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.64.13",
3
+ "version": "2.64.15",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/dist/utilsOolib/infoAlertBannerFnPlaceholder.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export function infoAlertBannerFnPlaceholder(): {
2
- SET_INFO_BANNER: (msg: any) => void;
3
- SET_ALERT_BANNER: (msg: any) => void;
4
- };
package/dist/utilsOolib/infoAlertBannerFnPlaceholder.js DELETED
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.infoAlertBannerFnPlaceholder = void 0;
4
- var infoAlertBannerFnPlaceholder = function () {
5
- return ({
6
- SET_INFO_BANNER: function (msg) { return window.alert(msg); },
7
- SET_ALERT_BANNER: function (msg) { return window.alert(msg); }
8
- });
9
- };
10
- exports.infoAlertBannerFnPlaceholder = infoAlertBannerFnPlaceholder;