oolib 2.97.0 → 2.99.0

package/dist/components/Modals/Modal/index.js

@@ -88,15 +88,7 @@ var Modal = function (_a) {
                             ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
-    var _o = (0, react_1.useState)(window.visualViewport.height), screenHeight = _o[0], setScreenHeight = _o[1];
-    (0, react_1.useEffect)(function () {
-        window.addEventListener('resize', setScreenHeight(window.visualViewport.height));
-        return function () {
-            window.removeEventListener('resize', setScreenHeight(window.visualViewport.height));
-        };
-    }, []);
-    var isKeyboardOpen = window.visualViewport.height < screenHeight;
-    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, { style: { height: isKeyboardOpen ? 'auto' : '100svh', overflow: 'hidden' } },
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",

package/dist/components/TextInputs/index.js

@@ -102,8 +102,8 @@ var TextInput = function (props) {
     actionBtn = props.actionBtn, clearBtn = props.clearBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     _d = props.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     validateOnlyOnBlur = _d === void 0 ? false : _d, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
-    _validationStatus = props.validationStatus;
-    var _e = (0, react_1.useState)(_validationStatus), validationStatus = _e[0], setValidationStatus = _e[1];
+    _validationStatus = props.validationStatus, _e = props.displayValidationMsg, displayValidationMsg = _e === void 0 ? true : _e;
+    var _f = (0, react_1.useState)(_validationStatus), validationStatus = _f[0], setValidationStatus = _f[1];
     (0, react_1.useEffect)(function () {
         setValidationStatus(_validationStatus);
     }, [_validationStatus]);
@@ -173,7 +173,7 @@ var TextInput = function (props) {
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
                     clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" } })),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" } }))),
-                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
+                (displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg)) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null,
                         validationStatus.msg,
                         validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -34,15 +34,23 @@ var EmbedLinkModal = function (_a) {
     var _b;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, canPlay = _a.canPlay, onChange = _a.onChange, invert = _a.invert;
     var _c = (0, react_1.useState)(value), localValue = _c[0], setLocalValue = _c[1];
+    var _d = (0, react_1.useState)(false), isValidURl = _d[0], setIsValidUrl = _d[1];
     return (react_1.default.createElement(Modal_1.Modal, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
         // invert={invert}
         desktopWidth: "50vw", fitToContentHeight: true, onClose: function () {
             setShowEmbedLinkModal(false);
         } },
         react_1.default.createElement("div", { style: { padding: '2rem' } },
-            react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { text: 'clear' } }),
-            localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
-            createVideoPreview({ value: localValue }),
+            react_1.default.createElement(TextInputs_1.URLInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { text: 'clear' }, displayValidationMsg: false, passValidationErrorToFormValidation: function (status) {
+                    if (status === "error") {
+                        setIsValidUrl(false);
+                    }
+                    else {
+                        setIsValidUrl(true);
+                    }
+                } }),
+            (localValue && isValidURl) && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
+            isValidURl && createVideoPreview({ value: localValue }),
             react_1.default.createElement(styled_1.StyledModalActionButtons, null,
                 react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
                     // invert={invert}

package/dist/components/VideoInput/index.js

@@ -88,6 +88,7 @@ function VideoInput(_a) {
             onError: function (err) {
                 var _a;
                 SET_ALERT_BANNER(((_a = err.response) === null || _a === void 0 ? void 0 : _a.data.errors[0].msg) || err.message, "red", 3500);
+                onChange(undefined);
             },
         });
     };

package/dist/icons/custom/index.d.ts

@@ -59,3 +59,5 @@ export declare const MalaysiaFlag: (props: any) => React.JSX.Element;
 export declare const UKFlag: (props: any) => React.JSX.Element;
 export declare const USAFlag: (props: any) => React.JSX.Element;
 export declare const IndonesiaFlag: (props: any) => React.JSX.Element;
+export declare const ChileFlag: (props: any) => React.JSX.Element;
+export declare const PakistanFlag: (props: any) => React.JSX.Element;

package/dist/icons/custom/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.USAFlag = exports.UKFlag = exports.MalaysiaFlag = exports.ColombiaFlag = exports.BrazilFlag = exports.AudioEmbedIcon = exports.VideoEmbedIcon = exports.Attachment2 = exports.PDFIcon = exports.RichFormatToolOrderedList = exports.RichFormatToolUnorderedList = exports.RichFormatToolH2 = exports.RichFormatToolBlockquote = exports.LinkIcon = exports.UnderlineBtn = exports.ItalicBtn = exports.BoldBtn = exports.SettingsSM = exports.Close_S = exports.UploadImage = exports.KebabMenu = exports.Website_solid_SM = exports.Phone_solid_SM = exports.Mail_solid_SM = exports.Youtube_solid_SM = exports.Instagram_solid_SM = exports.Twitter_solid_SM = exports.Linkedin_solid_SM = exports.Facebook_solid_SM = exports.EditSM = exports.AddXS = exports.UploadSM = exports.Download = exports.Download__nofill = exports.Index = exports.Person14 = exports.Location14 = exports.ModalBulbIcon = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.MultipleImages = exports.IndexIcon = void 0;
-exports.IndonesiaFlag = void 0;
+exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
@@ -394,3 +394,19 @@ var IndonesiaFlag = function (props) {
         react_1.default.createElement("path", { fill: "#EEE", d: "M36 27a4 4 0 01-4 4H4a4 4 0 01-4-4v-9h36v9z" })));
 };
 exports.IndonesiaFlag = IndonesiaFlag;
+var ChileFlag = function (props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 30, fill: "none", viewBox: "-4 -4 24 16" },
+        react_1.default.createElement("path", { d: "M20 12H-4V-4h24z", fill: "#d52b1e" }),
+        react_1.default.createElement("path", { d: "M4 4h16v-8H-4z", fill: "#fff" }),
+        react_1.default.createElement("path", { d: "M4 4h-8v-8h8z", fill: "#0039a6" })));
+};
+exports.ChileFlag = ChileFlag;
+var PakistanFlag = function (props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 30, fill: "none", viewBox: "-75 -40 120 80" },
+        react_1.default.createElement("path", { fill: "#fff", d: "M-75-40H45v80H-75z" }),
+        react_1.default.createElement("path", { fill: "#01411C", d: "M-45-40h90v80h-90z" }),
+        react_1.default.createElement("circle", { r: "24", fill: "#fff" }),
+        react_1.default.createElement("circle", { r: "22", cx: "-7", cy: "-40", fill: "#01411C", transform: "rotate(-41.634 45 -40)" }),
+        react_1.default.createElement("path", { fill: "#fff", d: "M8.751-17.959l10.11 11.373L3.997-9.844l13.94-6.1-7.692 13.129z" })));
+};
+exports.PakistanFlag = PakistanFlag;

package/dist/icons/index.d.ts

@@ -160,6 +160,8 @@ export namespace icons {
     export { MalaysiaFlag };
     export { BrazilFlag };
     export { ColombiaFlag };
+    export { ChileFlag };
+    export { PakistanFlag };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -322,3 +324,5 @@ import { UKFlag } from "./custom";
 import { MalaysiaFlag } from "./custom";
 import { BrazilFlag } from "./custom";
 import { ColombiaFlag } from "./custom";
+import { ChileFlag } from "./custom";
+import { PakistanFlag } from "./custom";

package/dist/icons/index.js

@@ -165,5 +165,7 @@ exports.icons = {
     UKFlag: custom_1.UKFlag,
     MalaysiaFlag: custom_1.MalaysiaFlag,
     BrazilFlag: custom_1.BrazilFlag,
-    ColombiaFlag: custom_1.ColombiaFlag
+    ColombiaFlag: custom_1.ColombiaFlag,
+    ChileFlag: custom_1.ChileFlag,
+    PakistanFlag: custom_1.PakistanFlag
 };

package/package.json

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