sccoreui 5.2.2 → 5.2.3

package/dist/pages/dropdown/dropdown-component.js

@@ -1,39 +0,0 @@
-"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 svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const react_1 = require("react");
-const svg_component_2 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const svg_icons_1 = require("../../directives/svg-icons");
-const DropdownComponent = () => {
-    const [selectedValue, setSelectedValue] = (0, react_1.useState)(null);
-    // Dropdown options
-    const members = [
-        { name: "Phoenix Baker", at: "@phoenix" },
-        { name: "Olivia Rhye", at: "@olivia" },
-        { name: "Lana Steiner", at: "@lana" },
-        { name: "Demi Wilkinson", at: "@demi" },
-        { name: "Candice Wu", at: "@candice" },
-        { name: "Natali Craig", at: "@natali" },
-        { name: "Drew Cano", at: "@drew" },
-    ];
-    const handleDropdownChange = (e) => {
-        setSelectedValue(e.value);
-    };
-    console.log(selectedValue);
-    // Item Template to display the options in the dropdown pannel
-    const itemTemplate = (option, isIcon) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.name === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name) && ((0, jsx_runtime_1.jsx)(svg_component_2.default, { icon: "dropdown-panel-check" })) })] })));
-    };
-    // Value Template to display value in the dropdown after selecting an option from the dropdown.
-    const selectedOptionTemplate = (option, isIcon, props) => {
-        if (option) {
-            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-content-between align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })) })));
-        }
-        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", { children: props.placeholder })] })));
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Dropdown" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-dropdown-xl flex align-items-center pp-check", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem p-dropdown-md flex align-items-center", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem p-error mt-2" }, { children: "This is an error message." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full h-full flex flex-wrap gap-4" }, { children: svg_icons_1.iconList.map((each) => ((0, jsx_runtime_1.jsx)(svg_component_2.default, { icon: each.name }))) }))] }));
-};
-exports.default = DropdownComponent;

package/dist/pages/file-upload/file-upload.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const fileupload_1 = require("primereact/fileupload");
-const react_1 = require("react");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const progressbar_1 = require("primereact/progressbar");
-const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
-const checkbox_1 = require("primereact/checkbox");
-require("./file-upload.scss");
-const button_1 = require("primereact/button");
-// import { Checkbox } from "primereact/checkbox";
-const FileUploadComponent = () => {
-    const fileupload = (0, react_1.useRef)(null);
-    const fileupload2 = (0, react_1.useRef)(null);
-    const onUpload = () => {
-    };
-    const emptyTemplate = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => {
-                fileupload.current.getInput().click();
-            } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold  text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] })));
-    };
-    const emptyTemplate2 = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => {
-                fileupload2.current.getInput().click();
-            } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold p-disabled text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] })));
-    };
-    const emptyTemplatea = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white  align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] })));
-    };
-    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: "File Upload" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { ref: fileupload, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate, itemTemplate: emptyTemplatea, className: "fileuploadd border-round-xl border-1  border-transparent hover:border-primary-600", maxFileSize: 1000000, onUpload: onUpload }), (0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { disabled: true, ref: fileupload2, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate2, itemTemplate: emptyTemplate2, className: "fileuploadd border-round-xl border-1  border-transparent", maxFileSize: 1000000, onUpload: onUpload })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start  p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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.jsxs)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-gray-500" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 59, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [59, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-red-100" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "p-button-danger shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-red-700" }) })] })) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex  border-1 border-gray-300 align-items-start  p-4 border-round-xl gap-2", style: { background: "linear-gradient(to right, var(--gray-50) 59%, white 41%)" } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { height: 30, value: 59, strokeColor: "var(--primary-500)", strokeWidth: 13, textDisabled: true })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-red-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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-red-700" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "200 KB \u2013 100% uploaded" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] }))] }))] }))] }))] }));
-};
-exports.default = FileUploadComponent;

package/dist/pages/flex.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const card_1 = require("primereact/card");
-const button_1 = require("primereact/button");
-const chip_1 = require("primereact/chip");
-const svg_component_1 = tslib_1.__importDefault(require("../directives/svg-component"));
-const avatar_png_1 = tslib_1.__importDefault(require("../assets/images/avatar.png"));
-const Flex = () => {
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center" }, { children: "P" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2 font-medium" }, { children: "PRIME" }))] }));
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card" }, { children: (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Asiya Javayant", image: avatar_png_1.default, removable: true }) })));
-};
-exports.default = Flex;

package/dist/pages/frolaTextEditor/froala-text-editor.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FroalaEditor_1 = tslib_1.__importDefault(require("../../components/froala-editor/FroalaEditor"));
-const FroalaTextEditorPage = () => {
-    const onchange = (content) => {
-        console.log(content);
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FroalaEditor_1.default, { id: "Froala_text_editor", placeholderText: "Type here", value: "Test Froala text editor", onChange: onchange }) }));
-};
-exports.default = FroalaTextEditorPage;

package/dist/pages/home.js

@@ -1,45 +0,0 @@
-"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("../pages/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 mega_menu_1 = tslib_1.__importDefault(require("./mega-mennu/mega-menu"));
-const not_found_1 = tslib_1.__importDefault(require("./not-found/not-found"));
-const multi_select_dropdown_1 = tslib_1.__importDefault(require("./multi-select-dropdown/multi-select-dropdown"));
-const froala_text_editor_1 = tslib_1.__importDefault(require("./frolaTextEditor/froala-text-editor"));
-const treedropdowselect_1 = tslib_1.__importDefault(require("./treeDropdownSelect/treedropdowselect"));
-const custom_color_picker_1 = tslib_1.__importDefault(require("./custom-color-picker/custom-color-picker"));
-const listboxdropdown_1 = tslib_1.__importDefault(require("./list-box-dropdown/listboxdropdown"));
-const Home = () => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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: '/text-editor', element: (0, jsx_runtime_1.jsx)(froala_text_editor_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, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/mega-menu", element: (0, jsx_runtime_1.jsx)(mega_menu_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/not-found", element: (0, jsx_runtime_1.jsx)(not_found_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/multi-select-dropdown", element: (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tree-dropdown-select", element: (0, jsx_runtime_1.jsx)(treedropdowselect_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/custom-color-picker", element: (0, jsx_runtime_1.jsx)(custom_color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/list-box-dropdown", element: (0, jsx_runtime_1.jsx)(listboxdropdown_1.default, {}) })] }) }) }));
-};
-exports.default = Home;

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

@@ -1,112 +0,0 @@
-"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.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.name === selectedCountry.name && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) })] })));
-    };
-    const phoneNumberItemTemplate = (item) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center w-full justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900" }, { children: item.name })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.name === selectedCurrency.name && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) })] })));
-    };
-    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, { icon: "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, { icon: "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, { icon: "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, { icon: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "payment-card" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "payment-card" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "payment-card" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, { icon: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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", itemTemplate: phoneNumberItemTemplate, 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, { icon: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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", itemTemplate: phoneNumberItemTemplate, 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, { icon: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "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, itemTemplate: phoneNumberItemTemplate, 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, itemTemplate: phoneNumberItemTemplate, 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, { icon: "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", itemTemplate: phoneNumberItemTemplate, 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, { icon: "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", itemTemplate: phoneNumberItemTemplate, 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, { icon: "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, { icon: "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, { icon: "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, { icon: "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/list-box-dropdown/listboxdropdown.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const sccoreui_1 = require("sccoreui");
-const list_box_dropdown_1 = tslib_1.__importDefault(require("../../components/list-box-dropdown/list-box-dropdown"));
-const react_1 = require("react");
-const ListBoxPage = () => {
-    const [selectedValues, setSelectedValues] = (0, react_1.useState)([]);
-    const cities = [
-        { name: 'Color', optionCode: 'CLR-0011' },
-        { name: 'Size', optionCode: 'SZ-0022' },
-        { name: 'Fit', optionCode: 'FT-0033' },
-        { name: 'Color1', optionCode: 'CLR-0101' },
-        { name: 'Size1', optionCode: 'SZ-0202' },
-        { name: 'Fit1', optionCode: 'FT-0303' },
-        { name: 'London1', optionCode: 'LD-34' },
-        { name: 'Istanbul1', optionCode: 'IS-T1dd' },
-        { name: 'Paris1', optionCode: 'PR-S541' }
-    ];
-    const headerTemplate = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full  flex align-items-center justify-content-between p-3 list_box_header" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "box_tittle font-semibold text-base text-gray-900" }, { children: "Options" })), (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { className: "focus:shadow-none p-0", link: true, icon: "pi pi-plus", size: "small", iconPos: "left", label: "Create Option" })] })));
-    };
-    const footeTemplate = () => {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-3 list_box_Footer" }, { children: "Footer" })));
-    };
-    const optionTemplate = (option) => {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex text-primary-600 align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "item_content" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-base font-semibold\t" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm" }, { children: option.optionCode }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "item_icon" }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.SvgComponent, { icon: "check", size: 20, className: "text-gray-500" }) }))] })) }));
-    };
-    // const chilTemplate = (item:any) => {
-    //     return(
-    //         <>
-    //             <div>
-    //                 {item.name}
-    //             </div>
-    //         </>
-    //     )
-    // }
-    const onChange = (e) => {
-        setSelectedValues(e.value);
-    };
-    const clickOnRemove = (item) => {
-        let items = selectedValues.filter((x) => x.optionCode !== item.optionCode);
-        setSelectedValues(items);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-red-500 cursor-pointer max-w-max", onClick: () => setSelectedValues([]) }, { children: "Remove" })), (0, jsx_runtime_1.jsx)(list_box_dropdown_1.default, { link: true, values: selectedValues, onChange: onChange, optionLabel: "name", optionTemplate: optionTemplate, listClassName: "h-18rem overflow-auto", listBoxclassName: "w-16rem border-none", label: "Add Option", listItems: cities, headerTemplate: headerTemplate, labelIconPos: "left", labelIcon: "pi pi-plus", labelIconSize: 'small', footeTemplate: footeTemplate, filter: true, filterPlaceholder: "Search", menuClassName: "w-16rem p-0", listBoxParentClassName: " w-16rem", multiple: true, showChilps: true, buttonClassName: "text-base", showRemoveIcon: "x-close", removeIconSize: 14, removeIconClassName: "", 
-                // chipTemplate={(item:any)=> chilTemplate(item)}
-                chipClassName: "cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg", onRemoveItem: (item) => clickOnRemove(item) })] }));
-};
-exports.default = ListBoxPage;

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("./loader-indicator.scss");
-const loading_indicator_custom_1 = tslib_1.__importDefault(require("../../components/loading-indicator/loading-indicator-custom"));
-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)(loading_indicator_custom_1.default, { bgStrokeColor: "var(--gray-100)", bgStroke: true, size: "28px" }), (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)(loading_indicator_custom_1.default, { bgStrokeColor: "var(--gray-100)", bgStroke: true, size: "42px" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] }))] })) }))] }));
-};
-exports.default = LoaderIndicatorComponent;

package/dist/pages/mega-mennu/mega-menu.js

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const megamenu_1 = require("primereact/megamenu");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const button_1 = require("primereact/button");
-const HeaderComponent = () => {
-    const items = [
-        {
-            label: "Home",
-        },
-        {
-            label: "Products",
-            items: [
-                [
-                    {
-                        label: "Products",
-                        items: [
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
-                            },
-                        ],
-                    },
-                ],
-            ],
-        },
-        {
-            label: "Resources",
-            items: [
-                [
-                    {
-                        label: "Resources",
-                        items: [
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
-                            },
-                            {
-                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
-                            },
-                        ],
-                    },
-                ],
-            ],
-        },
-        {
-            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: "m-0 text-gray-600 w-6" }, { children: "Aboutus" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Support" }))] }))),
-        },
-        {
-            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Press" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Contact" }))] }))),
-        },
-        {
-            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Carrer" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Sitemap" }))] }))),
-        },
-        {
-            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Legal" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Cookie settings" }))] }))),
-        },
-        {
-            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "md:hidden m-0 bg-primary-500 w-full " })),
-        },
-        {
-            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "md:hidden m-0 border-500 bg-transparent text-gray-500 w-full border-gray-300 shadow-md" })),
-        },
-    ];
-    const start = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "menu-logo" }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "text-gray-900 font-bold" }, { children: "Untitled UI" }))] })));
-    const end = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hidden md:flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "bg-transparent text-gray-500 border-none" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "bg-primary-500 " })] })));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(megamenu_1.MegaMenu, { model: items, orientation: "horizontal", start: start, end: end, menuIcon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-closeicon absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-hamburgermenu absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hamburger-menu" }) }))] }), breakpoint: "770px", className: "w-full", pt: {} }) }));
-};
-exports.default = HeaderComponent;