sccoreui 2.3.2 → 2.3.3

package/dist/pages/progress-steps/progress-steps.js

@@ -1,44 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressSteps = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const steps_1 = require("primereact/steps");
+const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const generateTemplate = (icon, label, optionalText) => ((0, jsx_runtime_1.jsxs)("a", Object.assign({ href: "#", className: "flex flex-column justify-content-end gap-3 align-items-center z-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: icon }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column justify-content-center align-items-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: optionalText }))] }))] })));
-const itemsDefault = [
-    {
-        label: "Personal Details",
-    },
-    {
-        label: "Company Details",
-    },
-    {
-        label: "Confirmation",
-    },
-];
-const stepItemsBasic = [
-    {
-        template: generateTemplate("step-checked", "Your Details", "Please provide your name and email"),
-    },
-    {
-        template: generateTemplate("step-current", "Company Details", "A few details about your company"),
-    },
-    {
-        template: generateTemplate("step-unvisited", "Invite Your Team", "Start collaborating with your team"),
-    },
-];
-const stepItemsOutline = [
-    {
-        template: generateTemplate("step-checked-outline", "Your Details", "Please provide your name and email"),
-    },
-    {
-        template: generateTemplate("step-current-outline", "Company Details", "A few details about your company"),
-    },
-    {
-        template: generateTemplate("step-unvisited-outline", "Invite Your Team", "Start collaborating with your team"),
-    },
-];
+require("./progress-steps.scss");
+const react_1 = require("react");
+const ProgressSteps = (props) => {
+    const { stepsItems, orientation, activeIndex, className, style } = props;
+    const [currentActive, setCurrentActive] = (0, react_1.useState)(activeIndex || 0);
+    const progressRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!orientation || orientation === "horizontal") {
+            progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+        }
+        else {
+            progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+        }
+    }, [currentActive]);
+    const handleNext = () => {
+        if (currentActive > stepsItems.length) {
+            setCurrentActive(stepsItems.length);
+        }
+        else {
+            setCurrentActive(currentActive + 1);
+        }
+    };
+    const handlePrev = () => {
+        if (currentActive < 1) {
+            setCurrentActive(1);
+        }
+        else {
+            setCurrentActive(currentActive - 1);
+        }
+    };
+    const orientationClass = !orientation ? "horizontal" : orientation;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `progress-container mb-2 ${orientationClass} ${className}`, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `progressbar ${orientationClass}`, ref: progressRef }), stepsItems.map((eachItem, index) => ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `progress-step-item  ${orientationClass}`, onClick: () => {
+                            if (eachItem.action) {
+                                eachItem.action();
+                            }
+                        } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: index === currentActive
+                                    ? "step-current"
+                                    : index > currentActive
+                                        ? "step-unvisited"
+                                        : "step-checked" }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: eachItem.template })] }), eachItem.id)))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2 mt-8" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === 0, onClick: handlePrev }, { children: "Prev" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === stepsItems.length - 1, onClick: handleNext }, { children: "Next" }))] }))] }));
+};
+exports.ProgressSteps = ProgressSteps;
 const ProgressStepsComponent = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsx)(steps_1.Steps, { model: itemsDefault, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsBasic, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsOutline, readOnly: false })] })));
+    const itemTemplate = (label, description, orientation = "horizontal") => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `step-item-data ${orientation}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] })));
+    const itemsHorizontal = [
+        {
+            id: "1",
+            template: itemTemplate("Your Details", "Please provide Your Details"),
+        },
+        {
+            id: "2",
+            template: itemTemplate("Company details", "A few details about your company"),
+        },
+        {
+            id: "3",
+            template: itemTemplate("Invite your team", "Start collaborating with your team"),
+        },
+    ];
+    const itemsVertical = [
+        {
+            id: "1",
+            template: itemTemplate("Your Details", "Please provide Your Details", "vertical"),
+        },
+        {
+            id: "2",
+            template: itemTemplate("Company details", "A few details about your company", "vertical"),
+        },
+        {
+            id: "3",
+            template: itemTemplate("Invite your team", "Start collaborating with your team", "vertical"),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8 ml-8 mt-8 pl-8" }, { children: [(0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: itemsHorizontal }), (0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: itemsVertical, orientation: "vertical" })] })));
 };
 exports.default = ProgressStepsComponent;

package/dist/pages/progress_bar_round/circle-progress-bar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CircleProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = 'var(--primary-600)', strokeBgColor = 'var(--gray-300)', value = -1, textDisabled = false }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex align-items-center justify-content-center", style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: { width: `${height}px`, height: `${height}px`, transform: "rotate(-90deg)", position: "absolute", top: "0", zIndex: "10" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: `${(256.92 - ((256.92 / 100) * value))}`, strokeLinecap: "round", stroke: `${strokeColor}` } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: { width: `${height}px`, height: `${height}px`, position: "absolute", transform: "rotate(-90deg)" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: "0", strokeLinecap: "round", stroke: `${strokeBgColor}` } }) })) })), !textDisabled && (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base" }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-4xl my-2" }, { children: [value, "%"] }))] }))] })));
+};
+exports.default = CircleProgressComponent;

package/dist/pages/progress_bar_round/half-circle-progres-bar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HalfProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = 'var(--primary-600)', strokeBgColor = 'var(--gray-300)', value = -1, textDisabled = false }) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex align-items-center justify-content-center", style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: { width: `${height}px`, height: `${height}px`, transform: "rotate(-90deg)", position: "absolute", top: "0", zIndex: "10" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "180.46", strokeDashoffset: `${(180.46 - ((180.46 / 100) * value))}`, strokeLinecap: "round", stroke: `${strokeColor}` } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: { width: `${height}px`, height: `${height}px`, position: "absolute", transform: "rotate(-90deg)" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "128.46", strokeDashoffset: "0", strokeLinecap: "round", stroke: `${strokeBgColor}` } }) })) })), !textDisabled && (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base" }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-4xl my-2" }, { children: [value, "%"] }))] }))] })) }));
+};
+exports.default = HalfProgressComponent;

package/dist/pages/slideout-menus/slideout-menus.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const sidebar_1 = require("primereact/sidebar");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const tabview_1 = require("primereact/tabview");
+const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
+const checkbox_1 = require("primereact/checkbox");
+const Payment_method_card_white_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-card-white.png"));
+const Payment_method_master_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-master-card.png"));
+const Payment_method_apple_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-apple-card.png"));
+const inputtext_1 = require("primereact/inputtext");
+const SlideoutMenuComponent = () => {
+    const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
+    const [visibleRight2, setVisibleRight2] = (0, react_1.useState)(false);
+    const [visibleRight3, setVisibleRight3] = (0, react_1.useState)(false);
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const [emailValue, setEmailValue] = (0, react_1.useState)("");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Slideout Menus" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex justify-content-between px-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Label discription", onClick: () => setVisibleRight(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Messaging", onClick: () => setVisibleRight2(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Payment Cards", onClick: () => setVisibleRight3(true) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight, position: "right", onHide: () => setVisibleRight(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "slide-out-menu-header-round-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Heading" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sideout-menu-footer" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-6  flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Save" })] }))] }))] })), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight2, position: "right", onHide: () => setVisibleRight2(false), className: "w-25rem" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full flex-column align-items-start mb-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Messages" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box w-full flex justify-content-between md:flex-column not-expand mt-6" }, { children: [(0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Recent" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Phoenix Baker" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "Just now" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Lana Steiner" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "2 mins ago" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@lana" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Thanks so much, happy with that." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Groups" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Archive" })] }))] })) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight3, position: "right", onHide: () => setVisibleRight3(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "slide-out-menu-header-round-payment-card-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex w-full flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Payment method" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Update your plan payment details." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Up to 10 users and 20GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_master_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Mastercard ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Up to 20 users and 40GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_apple_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Stripe (Visa ending 1234)" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-center justify-content-end gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-method-plus-icon" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-400 font-semibold" }, { children: "Add payment method" }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 my-6" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 line-height-2 text-base font-medium" }, { children: "Billing contact" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 line-height-2 text-base font-normal" }, { children: "Add a second billing contact email." })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1 mt-4" }, { children: "Email address" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sideout-menu-footer my-5" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-6  flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Confirm" })] }))] }))] }))] })) }))] }));
+};
+exports.default = SlideoutMenuComponent;