sccoreui 2.3.6 → 2.3.7

package/dist/pages/home.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const dropdown_component_1 = tslib_1.__importDefault(require("./dropdown/dropdown-component"));
+const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
+const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
+const toast_1 = tslib_1.__importDefault(require("./toast/toast"));
+const badge_1 = tslib_1.__importDefault(require("./badges/badge"));
+const checkbox_1 = tslib_1.__importDefault(require("./checkbox/checkbox"));
+const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button/radio-button-component"));
+const tags_1 = tslib_1.__importDefault(require("./tags/tags"));
+const progress_bar_1 = tslib_1.__importDefault(require("./progress-bar/progress-bar"));
+const avatar_1 = tslib_1.__importDefault(require("./avatar/avatar"));
+const slider_1 = tslib_1.__importDefault(require("./sliders/slider"));
+const flex_1 = tslib_1.__importDefault(require("./flex"));
+const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-group/checkbox-group-component"));
+const toggle_1 = tslib_1.__importDefault(require("./toggle/toggle"));
+const chart_1 = tslib_1.__importDefault(require("./chart/chart"));
+const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
+const loader_indicator_1 = tslib_1.__importDefault(require("./loader-indicator/loader-indicator"));
+const pagination_1 = tslib_1.__importDefault(require("../pages/paginator/pagination"));
+const shadows_1 = tslib_1.__importDefault(require("../pages/shadows/shadows"));
+const progress_steps_1 = tslib_1.__importDefault(require("../components/progress-steps/progress-steps"));
+const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
+const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
+const button_1 = tslib_1.__importDefault(require("./button/button"));
+const button_group_1 = tslib_1.__importDefault(require("./button-group/button-group"));
+const date_picker_1 = tslib_1.__importDefault(require("./date-picker/date-picker"));
+const file_upload_1 = tslib_1.__importDefault(require("./file-upload/file-upload"));
+const table_1 = tslib_1.__importDefault(require("./tabels/table"));
+const slideout_menus_1 = tslib_1.__importDefault(require("./slideout-menus/slideout-menus"));
+const content_dividers_1 = tslib_1.__importDefault(require("./content-dividers/content-dividers"));
+const Home = () => {
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tables", element: (0, jsx_runtime_1.jsx)(table_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/date-picker", element: (0, jsx_runtime_1.jsx)(date_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/file-upload", element: (0, jsx_runtime_1.jsx)(file_upload_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/loader-indicator", element: (0, jsx_runtime_1.jsx)(loader_indicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slideout-menus", element: (0, jsx_runtime_1.jsx)(slideout_menus_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/content-dividers", element: (0, jsx_runtime_1.jsx)(content_dividers_1.default, {}) })] }) }));
+};
+exports.default = Home;

package/dist/pages/input/input-text.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const inputtext_1 = require("primereact/inputtext");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const demoImage_png_1 = tslib_1.__importDefault(require("../../assets/images/demoImage.png"));
+const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
+require("./input-text.scss");
+const inputnumber_1 = require("primereact/inputnumber");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const chips_1 = require("primereact/chips");
+const InputComponent = () => {
+    // email value state for email input compoenent
+    const [emailValue, setEmailValue] = (0, react_1.useState)("");
+    // website state value for website input compoenent
+    const [websiteLink, setWebsiteLink] = (0, react_1.useState)("");
+    //card number state for card number input component
+    const [cardNumber, setCardNumber] = (0, react_1.useState)(null);
+    // state for text area input compoenent
+    const [textAreaValue, setTextAreaValue] = (0, react_1.useState)("");
+    //state for chips input compoenent
+    const [value, setValue] = (0, react_1.useState)([]);
+    //currency selection state for sale amout input component
+    const [selectedCurrency, setSelectedCurrency] = (0, react_1.useState)({
+        name: "USD",
+        code: "USD",
+        currency: "dollar",
+    });
+    // selected country state for phone number input compoenent
+    const [selectedCountry, setSelectedCountry] = (0, react_1.useState)({
+        name: "Australia",
+        code: "AU",
+        img: label_image_png_1.default,
+    });
+    /// curriencies select drop down for sale amount dropdow componet
+    const currencies = [
+        { name: "USD", code: "USD", currency: "dollar" },
+        { name: "INR", code: "INR", currency: "pound" },
+        { code: "AFN", name: "AFN", currency: "pound" },
+        { code: "ALL", name: "ALL", currency: "pound" },
+        { code: "DZD", name: "DZD", currency: "pound" },
+    ];
+    //countries option dropdown for phone number country selection component
+    const countries = [
+        { name: "Australia", code: "AU", img: label_image_png_1.default },
+        { name: "Brazil", code: "BR", img: demoImage_png_1.default },
+        { name: "China", code: "CN", img: demoImage_png_1.default },
+        { name: "Egypt", code: "EG", img: demoImage_png_1.default },
+    ];
+    // selected dropdown elements for phone number input component
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: option.name, src: option.img }) })));
+        }
+        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
+    };
+    // dropdown for phone number input component with image showing
+    const countryOptionTemplate = (item) => {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }) })));
+    };
+    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 mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column h-full w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full" }, { children: [(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", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900 ", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-disabled w-full" }, { children: [(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, { id: "email1", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "text-lg w-full font-normal text-gray-500 hover:text-gray-900", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-error w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "email2", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal p-invalid text-gray-500 hover:text-gray-900 ", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid email adress" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left 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.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left p-disabled 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, { id: "Email1", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "text-lg w-full font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-left p-invalid 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: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email2", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full p-invalid text-lg font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter a valid email address." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(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: websiteLink, onChange: (e) => {
+                                                                setWebsiteLink(e.target.value);
+                                                            }, id: "Website", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left text-gray-600 w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(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, { id: "Website1", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(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: websiteLink, onChange: (e) => {
+                                                                setWebsiteLink(e.target.value);
+                                                            }, id: "Website2", placeholder: "Enter text here", className: "w-full border-noround-right text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button p-component text-base text-gray-700 border-left-none font-semibold gap-1 p-button-outlined flex justify-content-center", outlined: true, onClick: () => {
+                                                        navigator.clipboard.writeText(websiteLink);
+                                                    } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website3", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup  w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(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, { disabled: true, id: "Website3", placeholder: "Enter text here", className: "w-full border-noround-right " })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button p-component text-base text-gray-700 gap-1 border-left-none font-semibold p-button-outlined flex justify-content-center", outlined: true, disabled: true, onClick: () => {
+                                                        navigator.clipboard.writeText(websiteLink);
+                                                    } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Card", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left payment-card-input 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: "payment-card" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full  text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Card1", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left payment-card-input 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: "payment-card" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { disabled: true, value: cardNumber, id: "Card1", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full text-lg font-normal  text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Card2", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left  payment-card-input 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: "payment-card" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card2", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full p-invalid text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid card number." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full   text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Sale amount", className: "w-full p-invalid  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-left-none p-invalid flex align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid amount." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix " }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid phone number." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid phone number." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { disabled: true, value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg  font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 30, className: "text-lg p-invalid font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid description." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { disabled: true, value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: "p-invalid w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid tags." }))] }))] }))] })) }))] }));
+};
+exports.default = InputComponent;

package/dist/pages/loader-indicator/loader-indicator.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./loader-indicator.scss");
+const LoaderIndicatorComponent = () => {
+    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 mb-4" }, { children: "Loader-Indicator" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium" }, { children: "Loading..." }))] }))] })) }))] }));
+};
+exports.default = LoaderIndicatorComponent;

package/dist/pages/paginator/pagination.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const paginator_1 = require("primereact/paginator");
+const ripple_1 = require("primereact/ripple");
+const utils_1 = require("primereact/utils");
+const button_1 = require("primereact/button");
+require("./pagination.scss");
+function TemplateDemo() {
+    const [first, setFirst] = (0, react_1.useState)([0, 0, 0]);
+    const [rows, setRows] = (0, react_1.useState)([10, 10, 10]);
+    const [first1, setFirst1] = (0, react_1.useState)(0);
+    const [rows1, setRows1] = (0, react_1.useState)(10);
+    const onPageChange1 = (event) => {
+        setFirst1(event.first);
+        setRows1(event.rows);
+    };
+    const onPageChange = (e, index) => {
+        setFirst(first.map((f, i) => (index === i ? e.first : f)));
+        setRows(rows.map((r, i) => (index === i ? e.rows : r)));
+    };
+    const template1 = {
+        layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white  border-none  mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-none ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template2 = {
+        layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            console.log(options);
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template3 = {
+        layout: ' CurrentPageReport PrevPageLink  NextPageLink',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) }))] })));
+        },
+        CurrentPageReport: (options) => {
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template4 = {
+        layout: 'PrevPageLink  NextPageLink CurrentPageReport',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template5 = {
+        layout: 'PrevPageLink CurrentPageReport NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template6 = {
+        layout: 'PrevPageLink PageLinks NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-right border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': false }, "border-1 border-left-none border-gray-300");
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: `${options.className} border-1 border-left-none border-gray-300`, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-left border-left-none px-4 py-2 border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
+        },
+    };
+    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: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10 ml-auto mr-auto grid" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "bg-square", template: template1, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template2, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template3, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template4, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template5, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "paginator-boxes", template: template6, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { first: first1, rows: rows1, totalRecords: 120, rowsPerPageOptions: [10, 20, 30], onPageChange: onPageChange1 }) }))] }))] }));
+}
+exports.default = TemplateDemo;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progressbar_1 = require("primereact/progressbar");
+const react_1 = require("react");
+const slider_1 = require("primereact/slider");
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
+const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/half-circle-progres-bar"));
+require("./progress-bar.scss");
+const ProgressBarComponent = () => {
+    const [value, setValue] = (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 mb-4" }, { children: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto progress-slider" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: 33,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "px-3 p-progress-value bg-white shadow-3 h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2  flex align-items-start text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: -24,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
+};
+exports.default = ProgressBarComponent;

package/dist/pages/radio-button/radio-button-component.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const radiobutton_1 = require("primereact/radiobutton");
+const RadioButtonComponent = () => {
+    const [ingredient, setIngredient] = (0, react_1.useState)("");
+    const [remember, setRemember] = (0, react_1.useState)(false);
+    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 mb-4" }, { children: "Radio Button" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex justify-content-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient1", name: "pizza", value: "Cheese", onChange: (e) => setIngredient(e.value), checked: ingredient === "Cheese" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient1", className: "ml-2" }, { children: "Cheese" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient2", name: "pizza", value: "Mushroom", onChange: (e) => setIngredient(e.value), checked: ingredient === "Mushroom" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Mushroom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient4", name: "pizza", value: "Onion", className: "p-invalid" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Onion" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient3", name: "pizza", value: "Pepperoni", onChange: (e) => setIngredient(e.value), checked: true, disabled: true }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Pepperoni" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: remember, className: "pt-1", onChange: () => setRemember(!remember) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", className: "pt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: true, disabled: true, className: "pt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }));
+};
+exports.default = RadioButtonComponent;

package/dist/pages/shadows/shadows.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShadowComponent = () => {
+    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 mb-4 mt-0" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full h-full flex-wrap align-items-center justify-content-center gap-5 my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-1" }, { children: "shadow-1" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-2" }, { children: "shadow-2" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-3" }, { children: "shadow-3" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-4" }, { children: "shadow-4" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-5" }, { children: "shadow-5" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-6" }, { children: "shadow-6" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-7" }, { children: "shadow-7" }))] }))] }));
+};
+exports.default = ShadowComponent;

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;