sccoreui 2.1.7 → 2.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/sccoreui.css +44 -25
- package/dist/assets/theme.css +2893 -2791
- package/dist/directives/svg-component.js +1 -1
- package/dist/directives/svg-icons.js +19 -5
- package/dist/pages/badges/badge.js +45 -6
- package/dist/pages/checkbox/checkbox.js +26 -0
- package/dist/pages/dropdown/dropdown-component.js +2 -4
- package/dist/pages/home.js +3 -1
- package/dist/pages/input/input-text.js +29 -32
- package/dist/pages/radio-button/radio-button-component.js +11 -0
- package/dist/pages/toast/toast.js +2 -2
- package/dist/types/pages/checkbox/checkbox.d.ts +2 -0
- package/dist/types/pages/dropdown/dropdown-component.d.ts +1 -1
- package/dist/types/pages/radio-button/radio-button-component.d.ts +2 -0
- package/package.json +1 -1
- package/dist/assets/svg/hyphen-white.svg +0 -3
|
@@ -6,6 +6,6 @@ const SvgComponent = ({ iconName }) => {
|
|
|
6
6
|
const iconObj = svg_icons_1.svgIcons.find((icon) => icon.name === iconName);
|
|
7
7
|
if (!iconObj)
|
|
8
8
|
return null; // handle case where icon name is not found
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)("span", { className: "flex align-items-center justify-content-center
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)("span", { className: "flex align-items-center justify-content-center", dangerouslySetInnerHTML: { __html: iconObj.svg } }));
|
|
10
10
|
};
|
|
11
11
|
exports.default = SvgComponent;
|
|
@@ -18,8 +18,22 @@ exports.svgIcons = [
|
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
name: "check-selected",
|
|
21
|
-
svg: `<svg width="
|
|
22
|
-
<path d="
|
|
21
|
+
svg: `<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
22
|
+
<path d="M9 1L3.5 6.5L1 4" stroke="#132067" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
|
|
23
|
+
</svg>
|
|
24
|
+
`,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: "check-selected-white",
|
|
28
|
+
svg: `<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
29
|
+
<path d="M9 1L3.5 6.5L1 4" stroke="#ffffff" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
|
|
30
|
+
</svg>
|
|
31
|
+
`,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
name: "hyphen-selected",
|
|
35
|
+
svg: `<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<path d="M1.5 1H8.5" stroke="#132067" stroke-width="1.66666" stroke-linecap="round" stroke-linejoin="round"/>
|
|
23
37
|
</svg>
|
|
24
38
|
`,
|
|
25
39
|
},
|
|
@@ -132,21 +146,21 @@ exports.svgIcons = [
|
|
|
132
146
|
},
|
|
133
147
|
{
|
|
134
148
|
name: "arrow-right-white",
|
|
135
|
-
svg: `<svg width="
|
|
149
|
+
svg: `<svg width="10" height="10" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
136
150
|
<path d="M1.16699 6.99935H12.8337M12.8337 6.99935L7.00033 1.16602M12.8337 6.99935L7.00033 12.8327" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
137
151
|
</svg>
|
|
138
152
|
`,
|
|
139
153
|
},
|
|
140
154
|
{
|
|
141
155
|
name: "arrow-right-primary-500",
|
|
142
|
-
svg: `<svg width="
|
|
156
|
+
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
143
157
|
<path d="M1.33334 6.00004H10.6667M10.6667 6.00004L6.00001 1.33337M10.6667 6.00004L6.00001 10.6667" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
144
158
|
</svg>
|
|
145
159
|
`,
|
|
146
160
|
},
|
|
147
161
|
{
|
|
148
162
|
name: "arrow-right-Error-500",
|
|
149
|
-
svg: `<svg width="
|
|
163
|
+
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
150
164
|
<path d="M1.33334 5.99992H10.6667M10.6667 5.99992L6.00001 1.33325M10.6667 5.99992L6.00001 10.6666" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
151
165
|
</svg>
|
|
152
166
|
`,
|
|
@@ -11,12 +11,51 @@ const dropdown_1 = require("primereact/dropdown");
|
|
|
11
11
|
const react_1 = require("react");
|
|
12
12
|
const button_1 = require("primereact/button");
|
|
13
13
|
const BadgeComponent = () => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
// dropdown badge state
|
|
15
|
+
const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
|
|
16
|
+
name: "Label",
|
|
17
|
+
code: "bg-red-500",
|
|
18
|
+
text_code: "text-error-700",
|
|
19
|
+
bg: "bg-green-50",
|
|
20
|
+
});
|
|
21
|
+
//dropdown badge options list
|
|
22
|
+
const labels = [
|
|
23
|
+
{
|
|
24
|
+
name: "Label",
|
|
25
|
+
code: "bg-red-500",
|
|
26
|
+
text_code: "text-error-700",
|
|
27
|
+
bg: "bg-green-50",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: "Label",
|
|
31
|
+
code: "bg-primary-500",
|
|
32
|
+
text_code: "text-primary-700",
|
|
33
|
+
bg: "bg-primary-50",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: "Label",
|
|
37
|
+
code: "bg-green-500",
|
|
38
|
+
text_code: "text-green-700",
|
|
39
|
+
bg: "bg-green-50",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "Label",
|
|
43
|
+
code: "bg-orange-500",
|
|
44
|
+
text_code: "text-orange-700",
|
|
45
|
+
bg: "bg-orange-50",
|
|
46
|
+
},
|
|
19
47
|
];
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 h-full w-full flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "align-items-center gap-5 my-8 w-full flex flex-wrap ", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-gray-100 border-round-2xl px-3 py-1 text-gray-700", children: "Label" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Click Me" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dot-icon" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dot-icon" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }), (0, jsx_runtime_1.jsx)("span", { children: "Label" })] }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center border-gray-700 border-1 p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon" }) }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-3xl flex align-items-center justify-content-center p-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-2" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedbadgeType, onChange: (e) => setSelectBadge(e.value), options: cities, optionLabel: "name", placeholder: "Label", className: "border-none shadow-none bg-gray-100 flex text-xs align-items-center p-2 h-1rem" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-5 my-8 align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 pl-1 pr-3 py-1 flex align-items-center justify-content-center text-sm border-round-2xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-gray-700 text-sm font-medium", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 pl-1 pr-3 py-1 flex align-items-center justify-content-center text-sm border-round-2xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-primary-600 text-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-white pl-1 pr-3 py-1 flex align-items-center justify-content-center text-sm border-round-2xl border-1 border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 text-gray-700 bg-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-50 text-red-700 pl-1 pr-3 py-1 flex align-items-center text-sm justify-content-center border-round-2xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-red-700 border-primary-600 text-gray-700 bg-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-100 text-red-700 pl-1 pr-3 py-1 flex align-items-center text-sm justify-content-center border-round-2xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-red-700 border-primary-600 text-gray-700 bg-red-50 text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-50 text-red-700 pl-1 pr-3 py-1 flex align-items-center text-sm justify-content-center border-round-2xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-white bg-red-600 text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-white text-red-700 border-1 pl-1 pr-3 py-1 flex text-sm align-items-center justify-content-center border-round-2xl border-red-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-red-700 border-1 border-red-600 bg-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "New feature" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-50 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-sm justify-content-center border-round-2xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-red-600 gap-2 bg-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["New feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-100 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-sm justify-content-center border-round-2xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-red-600 gap-2 bg-red-50 text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["New feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-50 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-sm justify-content-center border-round-2xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-white border-red-600 gap-2 bg-red-600 text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["New feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white text-red-700 pl-3 pr-1 py-1 flex align-items-center text-sm justify-content-center border-round-2xl border-1 border-red-600 gap-2 ", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-1 border-red-600 gap-2 bg-white text-sm font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["New feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] })] }));
|
|
48
|
+
// badge dropdown selected lablel templete
|
|
49
|
+
const selectedlabelTemplate = (option, props) => {
|
|
50
|
+
if (option) {
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
52
|
+
}
|
|
53
|
+
return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
|
|
54
|
+
};
|
|
55
|
+
// badge dropdown option lablel templete
|
|
56
|
+
const labelOptionTemplate = (option) => {
|
|
57
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
58
|
+
};
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Badges" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-8 h-full w-full flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700 pr-4", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-gray-700 text-md font-medium ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-100 mb-3 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-red-600 gap-2 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 pl-1 pr-4 mb-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 text-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 text-red-700 mb-3 pl-1 pr-3 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-white bg-red-600 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-white mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl border-1 border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 text-gray-700 bg-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-1 border-red-600 gap-2 ", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-1 border-red-600 gap-2 bg-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex mt-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-gray-100 border-round-2xl px-3 py-1 text-gray-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-3 mx-8" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gap-5 my-8 w-full flex flex-wrap align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center border-gray-700 border-1 p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon" }) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: "Label", className: "shadow-none p-dropdown-badge py-0 bg-red-50 border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl", valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] })] })] }));
|
|
21
60
|
};
|
|
22
61
|
exports.default = BadgeComponent;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const checkbox_1 = require("primereact/checkbox");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
8
|
+
const CheckboxCompoent = () => {
|
|
9
|
+
const [checkedBox, setCheckedBox] = (0, react_1.useState)(false);
|
|
10
|
+
const [checkedCircle, setCheckedCircle] = (0, react_1.useState)(false);
|
|
11
|
+
const [indeterminateBox, setIndeterminateBox] = (0, react_1.useState)(false);
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Checkbox & Checkcircle" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column justify-content-center align-items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex align-items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
13
|
+
setCheckedBox(e.checked);
|
|
14
|
+
}, checked: checkedBox, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
15
|
+
setIndeterminateBox(e.checked);
|
|
16
|
+
}, checked: indeterminateBox, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
17
|
+
setCheckedCircle(e.checked);
|
|
18
|
+
}, checked: checkedCircle, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid p-checkcircle", checked: false })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-content-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
19
|
+
setCheckedBox(e.checked);
|
|
20
|
+
}, checked: checkedBox, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
21
|
+
setIndeterminateBox(e.checked);
|
|
22
|
+
}, checked: indeterminateBox, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
|
|
23
|
+
setCheckedCircle(e.checked);
|
|
24
|
+
}, checked: checkedCircle, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-start gap-2", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] })] })] })] }));
|
|
25
|
+
};
|
|
26
|
+
exports.default = CheckboxCompoent;
|
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const dropdown_1 = require("primereact/dropdown");
|
|
6
|
-
// import { Button } from 'primereact/button';
|
|
7
6
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
8
7
|
const react_1 = require("react");
|
|
9
8
|
const DropdownComponent = () => {
|
|
@@ -21,7 +20,6 @@ const DropdownComponent = () => {
|
|
|
21
20
|
const handleDropdownChange = (e) => {
|
|
22
21
|
setSelectedValue(e.value);
|
|
23
22
|
};
|
|
24
|
-
// const userIcon = <SvgIcon iconName="user" />
|
|
25
23
|
// Item Template to display the options in the dropdown pannel
|
|
26
24
|
const itemTemplate = (option, isIcon) => {
|
|
27
25
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex align-items-center gap-2", children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal text-gray-600 text-lg", children: option.at })] }), selectedValue && selectedValue.name === option.name && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-primary-600" }))] }));
|
|
@@ -31,8 +29,8 @@ const DropdownComponent = () => {
|
|
|
31
29
|
if (option) {
|
|
32
30
|
return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-content-between align-items-center", children: (0, jsx_runtime_1.jsxs)("span", { className: "flex align-items-center gap-2", children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal text-gray-600 text-lg", children: option.at })] }) }));
|
|
33
31
|
}
|
|
34
|
-
return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: "flex gap-2", children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { children: props.placeholder })] }));
|
|
35
33
|
};
|
|
36
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Dropdown" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-base font-medium text-gray-700
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Dropdown" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { 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", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", { 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", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem p-error mt-2", children: "This is an error message." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem text-gray-600 mt-2", children: "This is a hint text to help user." })] })] })] }));
|
|
37
35
|
};
|
|
38
36
|
exports.default = DropdownComponent;
|
package/dist/pages/home.js
CHANGED
|
@@ -8,7 +8,9 @@ const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
|
|
|
8
8
|
const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
|
|
9
9
|
const toast_1 = tslib_1.__importDefault(require("./toast/toast"));
|
|
10
10
|
const badge_1 = tslib_1.__importDefault(require("./badges/badge"));
|
|
11
|
+
const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button/radio-button-component"));
|
|
12
|
+
const checkbox_1 = tslib_1.__importDefault(require("./checkbox/checkbox"));
|
|
11
13
|
const Home = () => {
|
|
12
|
-
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: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) })] }) }));
|
|
14
|
+
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: "/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: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) })] }) }));
|
|
13
15
|
};
|
|
14
16
|
exports.default = Home;
|
|
@@ -34,6 +34,7 @@ const InputComponent = () => {
|
|
|
34
34
|
const [selectedCountry, setSelectedCountry] = (0, react_1.useState)({
|
|
35
35
|
name: "Australia",
|
|
36
36
|
code: "AU",
|
|
37
|
+
img: label_image_png_1.default,
|
|
37
38
|
});
|
|
38
39
|
/// curriencies select drop down for sale amount dropdow componet
|
|
39
40
|
const currencies = [
|
|
@@ -45,68 +46,64 @@ const InputComponent = () => {
|
|
|
45
46
|
];
|
|
46
47
|
//countries option dropdown for phone number country selection component
|
|
47
48
|
const countries = [
|
|
48
|
-
{ name: "Australia", code: "AU" },
|
|
49
|
-
{ name: "Brazil", code: "BR" },
|
|
50
|
-
{ name: "China", code: "CN" },
|
|
51
|
-
{ name: "Egypt", code: "EG" },
|
|
49
|
+
{ name: "Australia", code: "AU", img: label_image_png_1.default },
|
|
50
|
+
{ name: "Brazil", code: "BR", img: demoImage_png_1.default },
|
|
51
|
+
{ name: "China", code: "CN", img: demoImage_png_1.default },
|
|
52
|
+
{ name: "Egypt", code: "EG", img: demoImage_png_1.default },
|
|
52
53
|
];
|
|
53
54
|
// selected dropdown elements for phone number input component
|
|
54
55
|
const selectedCountryTemplate = (option, props) => {
|
|
55
56
|
if (option) {
|
|
56
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "flex align-items-center", children: (0, jsx_runtime_1.jsx)("img", { alt: option.name, src:
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "flex align-items-center", children: (0, jsx_runtime_1.jsx)("img", { alt: option.name, src: option.img }) }));
|
|
57
58
|
}
|
|
58
59
|
return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
|
|
59
60
|
};
|
|
60
61
|
// dropdown for phone number input component with image showing
|
|
61
|
-
const countryOptionTemplate = () => {
|
|
62
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "flex align-items-center", children: (0, jsx_runtime_1.jsx)("img", { alt:
|
|
62
|
+
const countryOptionTemplate = (item) => {
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "flex align-items-center", children: (0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }) }));
|
|
63
64
|
};
|
|
64
|
-
|
|
65
|
-
const customChip = (item) => {
|
|
66
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "im,agedd", className: "h-1rem h-1rem border-round-lg mr-1" }), (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium text-gray-700", children: item })] }));
|
|
67
|
-
};
|
|
68
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Input" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-column h-full w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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: "olivia@untitledui.com", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900 ", onChange: (e) => {
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Input" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-column h-full w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
69
66
|
setEmailValue(e.target.value);
|
|
70
|
-
} })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email1", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-disabled w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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: "
|
|
67
|
+
} })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email1", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-disabled w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
71
68
|
setEmailValue(e.target.value);
|
|
72
|
-
} })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email2", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-error w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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: "
|
|
69
|
+
} })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email2", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-error w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
73
70
|
setEmailValue(e.target.value);
|
|
74
|
-
} })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base p-error font-normal mt-1", children: "
|
|
71
|
+
} })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base p-error font-normal mt-1", children: "Enter valid email adress" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
75
72
|
setEmailValue(e.target.value);
|
|
76
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
73
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email1", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-disabled p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email2", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-invalid p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
77
74
|
setEmailValue(e.target.value);
|
|
78
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
75
|
+
}, "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", { id: "username-help", className: "text-base p-error font-normal mt-1", children: "Enter a valid email address." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-inputgroup-addon border-round-left w-5rem", children: "http://" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
79
76
|
setWebsiteLink(e.target.value);
|
|
80
|
-
}, id: "Website", "aria-describedby": "username-help", placeholder: "
|
|
77
|
+
}, 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website1", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-inputgroup-addon border-round-left text-gray-600 w-5rem", children: "http://" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website2", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
81
78
|
setWebsiteLink(e.target.value);
|
|
82
|
-
}, id: "Website2", placeholder: "
|
|
79
|
+
}, 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, { 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: () => {
|
|
83
80
|
navigator.clipboard.writeText(websiteLink);
|
|
84
|
-
}, children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website3", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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: "
|
|
81
|
+
}, children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website3", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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, { 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: () => {
|
|
85
82
|
navigator.clipboard.writeText(websiteLink);
|
|
86
83
|
}, children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
87
84
|
setCardNumber(e.value);
|
|
88
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
85
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card1", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
89
86
|
setCardNumber(e.value);
|
|
90
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
87
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card2", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
91
88
|
setCardNumber(e.value);
|
|
92
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
89
|
+
}, "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", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid card number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
93
90
|
setCardNumber(e.value);
|
|
94
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
91
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
95
92
|
setCardNumber(e.value);
|
|
96
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
93
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-invalid w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
97
94
|
setCardNumber(e.value);
|
|
98
|
-
}, "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", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "
|
|
95
|
+
}, "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", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid amount." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
99
96
|
setCardNumber(e.value);
|
|
100
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
97
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
101
98
|
setCardNumber(e.value);
|
|
102
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
99
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
103
100
|
setCardNumber(e.value);
|
|
104
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
101
|
+
}, "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", { id: "username-help", className: "text-base p-error font-normal mt-1", children: "Enter valid phone number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
105
102
|
setCardNumber(e.value);
|
|
106
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
103
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
107
104
|
setCardNumber(e.value);
|
|
108
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
105
|
+
}, "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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: " z-5 p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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) => {
|
|
109
106
|
setCardNumber(e.value);
|
|
110
|
-
}, "aria-describedby": "username-help", placeholder: "
|
|
107
|
+
}, "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", { id: "username-help", className: "text-base p-error font-normal mt-1", children: "Enter valid phone number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { 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", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid description." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { 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", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid tags." })] })] })] }) })] }));
|
|
111
108
|
};
|
|
112
109
|
exports.default = InputComponent;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const radiobutton_1 = require("primereact/radiobutton");
|
|
6
|
+
const RadioButtonComponent = () => {
|
|
7
|
+
const [ingredient, setIngredient] = (0, react_1.useState)("");
|
|
8
|
+
const [remember, setRemember] = (0, react_1.useState)(false);
|
|
9
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Radio Button" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-center gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex justify-content-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { 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", { htmlFor: "ingredient1", className: "ml-2", children: "Cheese" })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { htmlFor: "ingredient2", className: "ml-2", children: "Mushroom" })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { htmlFor: "ingredient2", className: "ml-2", children: "Onion" })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { htmlFor: "ingredient2", className: "ml-2", children: "Pepperoni" })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] })] }));
|
|
10
|
+
};
|
|
11
|
+
exports.default = RadioButtonComponent;
|
|
@@ -28,7 +28,7 @@ const ToastComponent = () => {
|
|
|
28
28
|
var _a;
|
|
29
29
|
(_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
|
|
30
30
|
severity: "error",
|
|
31
|
-
summary: ((0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "info-icon" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-white", children: "There was a problem connecting to the app" })] })),
|
|
31
|
+
summary: ((0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "info-icon" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-white font-light", children: "There was a problem connecting to the app" })] })),
|
|
32
32
|
detail: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pl-6", children: ["Couldn\u2019t connect to the app because of insufficient permissions", (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Learn more", link: true, className: "text-white p-0" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Retry", link: true, className: "text-white p-0 gap-2", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" }) })] })] }) })),
|
|
33
33
|
life: 300000,
|
|
34
34
|
});
|
|
@@ -42,6 +42,6 @@ const ToastComponent = () => {
|
|
|
42
42
|
life: 3000,
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Toast Messages" }), (0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 justify-content-center align-items-center
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Toast Messages" }), (0, jsx_runtime_1.jsx)("object", { id: "svg1", data: "./down_arrow.svg", type: "image/svg+xml" }), (0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 justify-content-center align-items-center", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Success", className: "p-button-success border-round-3xl", onClick: showSuccess }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Info", className: "p-button-info border-round-3xl", onClick: showInfo }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Warn", className: "p-button-warning border-round-3xl", onClick: showWarning }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Error", className: "p-button-danger border-round-3xl", onClick: showError })] })] }));
|
|
46
46
|
};
|
|
47
47
|
exports.default = ToastComponent;
|