oolib 2.188.4 → 2.188.6

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -84,8 +84,8 @@ function ImageEditor(_a) {
     //backwards compat
     _e = _c.richTextHasValue, 
     //backwards compat
-    richTextHasValue = _e === void 0 ? function () { return false; } : _e; //temporarily passed thru from okf
-    var _f = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _f[0], setUnderEditImageData = _f[1];
+    richTextHasValue = _e === void 0 ? function () { return false; } : _e, _f = _c.allTpls, allTpls = _f === void 0 ? [] : _f; //temporarily passed thru from okf
+    var _g = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _g[0], setUnderEditImageData = _g[1];
     var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
     //set state in parent imageeditor
     (0, react_1.useEffect)(function () {
@@ -100,15 +100,15 @@ function ImageEditor(_a) {
      * underEditImageData is merged into imageData, only if the 'formattings'
      * are 'saved'
      */
-    var _g = underEditImageData || imageData, publicUrl = _g.publicUrl, _h = _g.imageSpread, imageSpread = _h === void 0 ? defaultImageSpread : _h, _j = _g.imageRotate, imageRotate = _j === void 0 ? 0 : _j, _k = _g.cropX, cropX = _k === void 0 ? 0 : _k, _l = _g.cropY, cropY = _l === void 0 ? 0 : _l;
+    var _h = underEditImageData || imageData, publicUrl = _h.publicUrl, _j = _h.imageSpread, imageSpread = _j === void 0 ? defaultImageSpread : _j, _k = _h.imageRotate, imageRotate = _k === void 0 ? 0 : _k, _l = _h.cropX, cropX = _l === void 0 ? 0 : _l, _m = _h.cropY, cropY = _m === void 0 ? 0 : _m;
     /**
      * repos management
      */
     var wrapperRef = (0, react_1.useRef)(null);
     var renderedImageRef = (0, react_1.useRef)(null);
     var isFirstMount = (0, react_1.useRef)(true);
-    var _m = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _m[0], setFullWidthOrFullHeightImg = _m[1];
-    var _o = (0, useReorientImage_1.useReorientImage)({
+    var _o = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _o[0], setFullWidthOrFullHeightImg = _o[1];
+    var _p = (0, useReorientImage_1.useReorientImage)({
         imageRotate: imageRotate,
         setFullWidthOrFullHeightImg: setFullWidthOrFullHeightImg,
         setUnderEditImageData: setUnderEditImageData,
@@ -118,10 +118,10 @@ function ImageEditor(_a) {
         isFirstMount: isFirstMount,
         handleDeleteSingleImage: handleDeleteSingleImage,
         readOnly: readOnly
-    }), reorientedImageTempUrl = _o.reorientedImageTempUrl, imageLazyLoading = _o.imageLazyLoading;
-    var _p = (0, react_1.useState)(undefined), showDeleteImageModal = _p[0], setShowDeleteImageModal = _p[1];
+    }), reorientedImageTempUrl = _p.reorientedImageTempUrl, imageLazyLoading = _p.imageLazyLoading;
+    var _q = (0, react_1.useState)(undefined), showDeleteImageModal = _q[0], setShowDeleteImageModal = _q[1];
     var inputRef = (0, react_1.useRef)(null);
-    var _q = (0, react_1.useState)(undefined), editorStyle = _q[0], setEditorStyle = _q[1]; //alt: modal
+    var _r = (0, react_1.useState)(undefined), editorStyle = _r[0], setEditorStyle = _r[1]; //alt: modal
     (0, react_1.useEffect)(function () { isFirstMount.current = false; }, []);
     var decideEditorStyle = function () {
         var _a = wrapperRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
@@ -183,7 +183,7 @@ function ImageEditor(_a) {
                 readOnly && react_1.default.createElement(Divider_1.Divider, { invert: invert }))),
         (imageTags === null || imageTags === void 0 ? void 0 : imageTags.enable) &&
             ((_b = imageTags === null || imageTags === void 0 ? void 0 : imageTags.config) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
-                var _b;
+                var _b, _c, _d, _e;
                 var comp = _a.comp, tagCategory = _a.tagCategory;
                 var compsLookup = {
                     TagsInputMulti: TagsInputMulti,
@@ -192,7 +192,7 @@ function ImageEditor(_a) {
                 var Comp = compsLookup[comp];
                 if (!Comp)
                     return react_1.default.createElement("div", null, "placeholder for tag input");
-                return (react_1.default.createElement(Comp, { popOutOfOverflowHiddenParent: true, tagType: tagCategory, value: (_b = imageData.tags) === null || _b === void 0 ? void 0 : _b[tagCategory], onChange: function (id, val) {
+                return (react_1.default.createElement(Comp, { label: ((_d = (_c = (_b = allTpls.find(function (tpl) { return tpl.kp_content_type === tagCategory; })) === null || _b === void 0 ? void 0 : _b.general) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.title) || tagCategory, popOutOfOverflowHiddenParent: true, tagType: tagCategory, value: (_e = imageData.tags) === null || _e === void 0 ? void 0 : _e[tagCategory], onChange: function (id, val) {
                         var _a;
                         handleSingleImageDataChange({
                             publicUrl: publicUrl,

package/dist/stories/v2/components/Checkbox.stories.js

@@ -173,7 +173,7 @@ exports.CheckboxList.argTypes = {
 };
 var CheckboxInput = function (args) {
     var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
-    var _b = (0, react_1.useState)({ value: "smth", display: "Squidward" }), option = _b[0], setOption = _b[1];
+    var _b = (0, react_1.useState)({ value: "smth", display: "Squidward", desc: 'This is an explanation' }), option = _b[0], setOption = _b[1];
     (0, react_1.useEffect)(function () {
         setOption(__assign(__assign({}, option), { display: args.option1 }));
     }, [args.option1]);

package/dist/v2/components/Accordion/index.js

@@ -52,7 +52,7 @@ var useStyleUpdateAfterToggleTransition_1 = require("../../../utils/useStyleUpda
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"], ["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"])), colors_1.colors.grey10);
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 0 : 180); }, (0, mixins_1.transition)("transform"));
+var ArrowWrapper = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(", "deg);\n  ", ";\n"])), function (props) { return (props.isExpanded ? 180 : 0); }, (0, mixins_1.transition)("transform"));
 var StyledContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: flex-end;\n  \n  ", "\n  height: ", ";\n"])), function (_a) {
     var expandAnimationDuration = _a.expandAnimationDuration;
     return (0, mixins_1.transition)("height ".concat(expandAnimationDuration / 1000, "s ease-out"));

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -43,6 +43,8 @@ var CheckboxInput = function (_a) {
                     : genCheckboxButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
             : genCheckboxButton() // rightWrongResult has not come in. so gen normal radio button
         ),
-        react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled ? grey40 : grey80, invert: invert }, option.display)));
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { bold: rightWrongResult && isSelected, color: disabled ? grey40 : grey80, invert: invert }, option.display),
+            option.desc && react_1.default.createElement(Typo2_1.UI_CAPTION_DF, null, option.desc))));
 };
 exports.CheckboxInput = CheckboxInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.188.4",
+  "version": "2.188.6",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",