empower-container 0.1.12 → 0.1.13

package/{dist/cjs → src/main}/inputs/Select.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -21,15 +44,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 require("../../scss/style.scss");
 // Imports
 var Asset_1 = require("../assets/Asset");
 var Popover = function (_a) {
     var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: open &&
-            (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
+    return (react_1.default.createElement(react_1.Fragment, null, open &&
+        react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }),
+            react_1.default.createElement("div", { className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, children))));
 };
 exports.Popover = Popover;
 var Dropdown = function (_a) {
@@ -392,12 +416,41 @@ var Dropdown = function (_a) {
         event && event.preventDefault();
         return onChanged && onChanged(event);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'em-select ' + customClass }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: dropdownClass, id: id && id.constructor === String ? id : 'select-default-id', "data-testid": id && id.constructor === String ? id : 'select-default-id' }, { children: [type === 'select' ? ((0, jsx_runtime_1.jsx)("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "select-input-".concat(id) : 'select-input-default-id', id: id && id.constructor === String ? "".concat(id, "-select-input-default-id") : "select-input-default-id", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, value: value ? selectedValue : selectTemporaryValue, placeholder: selectedValue, autoComplete: 'off', disabled: disabled ? disabled : false, onKeyDown: function (event) { return handleKeyPress(event); } })) : ((0, jsx_runtime_1.jsx)("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "".concat(id, "-multi-select-input") : "multi-select-input-default-id", id: id && id.constructor === String ? "".concat(id, "-multi-select-input-default-id") : "multi-select-input-default-id", type: "text", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, placeholder: selectedValue, autoComplete: 'off', value: value && value.length > 0 ? multiSelectValue : "", disabled: disabled ? disabled : false, readOnly: true })), type === 'select' ? (disabled ? ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon" }, { children: Asset_1.SVG_ARROWDOWN }))) : (value && value !== "" && !hideClearIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'clear-icon', onClick: function (event) { return clearValuesHandler(event); }, className: 'em-field-icon' }, { children: Asset_1.SVG_CLOSE_GRAY }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); } }, { children: Asset_1.SVG_ARROWDOWN }))))) : null] })), (0, jsx_runtime_1.jsx)(exports.Popover, __assign({ id: "select-popover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'on-blur'); } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-popover" }, { children: [type === 'multi-select' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-search e-input" }, { children: (0, jsx_runtime_1.jsx)("input", { id: "multi-select-input-search", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, placeholder: "Search", value: selectTemporaryValue, disabled: disabled ? disabled : false, autoComplete: "off" }) }))) : null, optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
-                        // Default array display of options
-                        (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: type === 'select' ? (optionsArray.map(function (opt, idx) { return ((0, jsx_runtime_1.jsx)("option", __assign({ className: keyOption === idx ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : type === 'multi-select' ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-multiple" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-all" }, { children: optionsArray.length > 1 ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }), 'select-all')) : null })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-checklist" }, { children: optionsArray.map(function (opt, idx) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions(opt), id: opt.value, readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: opt.label })] }), idx)); }) }))] })) })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" }) })) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
-                        // Display of options when grouped (*its only applicable on select type)
-                        (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: type === 'select' ? (Object.keys(optionsArray).map(function (id, grpIdx) { return ((0, jsx_runtime_1.jsx)("optgroup", __assign({ label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' }, { children: optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return ((0, jsx_runtime_1.jsx)("option", __assign({ className: (grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : null }), id)); })) : type === 'multi-select' ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-multiple" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-all" }, { children: Object.keys(optionsArray).length > 1 || (Object.keys(optionsArray).length === 1 && optionsArray[Object.keys(optionsArray)[0]].options && optionsArray[Object.keys(optionsArray)[0]].options.constructor === Array && optionsArray[Object.keys(optionsArray)[0]].options.length > 1) ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }), 'select-all')) : null })), Object.keys(optionsArray).map(function (id) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-checklist" }, { children: [id !== 'selected-values' ? ((0, jsx_runtime_1.jsx)("optgroup", { label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' })) : null, optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", 
-                                                                // checked={handleCheckedOptions(opt)}
-                                                                checked: value, id: opt.value, readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: opt.label })] }), idx)); })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" })] })) }, id)); })] })) })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" }) })) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-noresult" }, { children: "No options" }))] })) }))] })));
+    return (react_1.default.createElement("div", { className: 'em-select ' + customClass },
+        react_1.default.createElement("div", { className: dropdownClass, id: id && id.constructor === String ? id : 'select-default-id', "data-testid": id && id.constructor === String ? id : 'select-default-id' },
+            type === 'select' ? (react_1.default.createElement("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "select-input-".concat(id) : 'select-input-default-id', id: id && id.constructor === String ? "".concat(id, "-select-input-default-id") : "select-input-default-id", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, value: value ? selectedValue : selectTemporaryValue, placeholder: selectedValue, autoComplete: 'off', disabled: disabled ? disabled : false, onKeyDown: function (event) { return handleKeyPress(event); } })) : (react_1.default.createElement("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "".concat(id, "-multi-select-input") : "multi-select-input-default-id", id: id && id.constructor === String ? "".concat(id, "-multi-select-input-default-id") : "multi-select-input-default-id", type: "text", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, placeholder: selectedValue, autoComplete: 'off', value: value && value.length > 0 ? multiSelectValue : "", disabled: disabled ? disabled : false, readOnly: true })),
+            type === 'select' ? (disabled ? (react_1.default.createElement("div", { "data-testid": 'dropdown-icon', className: "em-field-icon" }, Asset_1.SVG_ARROWDOWN)) : (value && value !== "" && !hideClearIcon ? (react_1.default.createElement("div", { "data-testid": 'clear-icon', onClick: function (event) { return clearValuesHandler(event); }, className: 'em-field-icon' }, Asset_1.SVG_CLOSE_GRAY)) : (react_1.default.createElement("div", { "data-testid": 'dropdown-icon', className: "em-field-icon", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); } }, Asset_1.SVG_ARROWDOWN)))) : null),
+        react_1.default.createElement(exports.Popover, { id: "select-popover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'on-blur'); } },
+            react_1.default.createElement("div", { className: "em-select-popover" },
+                type === 'multi-select' ? (react_1.default.createElement("div", { className: "em-select-search e-input" },
+                    react_1.default.createElement("input", { id: "multi-select-input-search", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, placeholder: "Search", value: selectTemporaryValue, disabled: disabled ? disabled : false, autoComplete: "off" }))) : null,
+                optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
+                // Default array display of options
+                react_1.default.createElement(react_1.Fragment, null, type === 'select' ? (optionsArray.map(function (opt, idx) { return (react_1.default.createElement("option", { className: keyOption === idx ? 'is-highlighted' : '', key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } }, opt.label)); })) : type === 'multi-select' ? (react_1.default.createElement(react_1.Fragment, null,
+                    react_1.default.createElement("div", { className: "em-select-multiple" },
+                        react_1.default.createElement("div", { className: "em-select-all" }, optionsArray.length > 1 ? (react_1.default.createElement("div", { className: "em-select-check", key: 'select-all', onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } },
+                            react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }),
+                            react_1.default.createElement("label", { htmlFor: "" }),
+                            react_1.default.createElement("span", null, "Select All"))) : null),
+                        react_1.default.createElement("div", { className: "em-select-checklist" }, optionsArray.map(function (opt, idx) { return (react_1.default.createElement("div", { id: 'option-div', className: "em-select-check", key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } },
+                            react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions(opt), id: opt.value, readOnly: true, autoComplete: "off" }),
+                            react_1.default.createElement("label", { htmlFor: "" }),
+                            react_1.default.createElement("span", null, opt.label))); }))))) : react_1.default.createElement(react_1.Fragment, null, "No options"))) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
+                // Display of options when grouped (*its only applicable on select type)
+                react_1.default.createElement(react_1.Fragment, null, type === 'select' ? (Object.keys(optionsArray).map(function (id, grpIdx) { return (react_1.default.createElement("optgroup", { key: id, label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' }, optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (react_1.default.createElement("option", { key: idx, className: (grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, opt.label)); })) : null)); })) : type === 'multi-select' ? (react_1.default.createElement(react_1.Fragment, null,
+                    react_1.default.createElement("div", { className: "em-select-multiple" },
+                        react_1.default.createElement("div", { className: "em-select-all" }, Object.keys(optionsArray).length > 1 || (Object.keys(optionsArray).length === 1 && optionsArray[Object.keys(optionsArray)[0]].options && optionsArray[Object.keys(optionsArray)[0]].options.constructor === Array && optionsArray[Object.keys(optionsArray)[0]].options.length > 1) ? (react_1.default.createElement("div", { className: "em-select-check", key: 'select-all', onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } },
+                            react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }),
+                            react_1.default.createElement("label", { htmlFor: "" }),
+                            react_1.default.createElement("span", null, "Select All"))) : null),
+                        Object.keys(optionsArray).map(function (id) { return (react_1.default.createElement(react_1.Fragment, { key: id },
+                            react_1.default.createElement("div", { className: "em-select-checklist" },
+                                id !== 'selected-values' ? (react_1.default.createElement("optgroup", { label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' })) : null,
+                                optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (react_1.default.createElement("div", { id: 'option-div', className: "em-select-check", key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } },
+                                    react_1.default.createElement("input", { type: "checkbox", 
+                                        // checked={handleCheckedOptions(opt)}
+                                        checked: value, id: opt.value, readOnly: true, autoComplete: "off" }),
+                                    react_1.default.createElement("label", { htmlFor: "" }),
+                                    react_1.default.createElement("span", null, opt.label))); })) : react_1.default.createElement(react_1.Fragment, null, "No options")))); })))) : react_1.default.createElement(react_1.Fragment, null, "No options"))) : react_1.default.createElement("div", { className: "em-noresult" }, "No options")))));
 };
 exports.default = Dropdown;