sccoreui 2.4.8 → 2.5.0
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 +26 -7
- package/dist/components/chips/chip.js +13 -2
- package/dist/components/input/input.js +0 -8
- package/dist/components/progress-steps/progress-steps.js +1 -1
- package/dist/components/sliders/sliders.js +98 -2
- package/dist/directives/svg-component.js +24 -950
- package/dist/directives/svg-icons.js +4570 -197
- package/dist/pages/avatar/avatar.js +6 -6
- package/dist/pages/badges/badge.js +6 -6
- package/dist/pages/breadcrumb/breadcrumb.js +2 -2
- package/dist/pages/button/button.js +1 -1
- package/dist/pages/button-group/button-group.js +1 -1
- package/dist/pages/checkbox/checkbox.js +6 -6
- package/dist/pages/checkbox-group/checkbox-group-component.js +1 -1
- package/dist/pages/color-picker/color-picker.js +1 -1
- package/dist/pages/content-dividers/content-dividers.js +1 -1
- package/dist/pages/date-picker/date-picker.js +1 -1
- package/dist/pages/dropdown/dropdown-component.js +3 -3
- package/dist/pages/file-upload/file-upload.js +4 -4
- package/dist/pages/home.js +1 -1
- package/dist/pages/input/input-text.js +22 -22
- package/dist/pages/mega-mennu/mega-menu.js +10 -10
- package/dist/pages/not-found/not-found.js +1 -1
- package/dist/pages/paginator/pagination.js +12 -12
- package/dist/pages/slideout-menus/slideout-menus.js +5 -5
- package/dist/pages/tabels/table.js +5 -5
- package/dist/pages/tags/tags.js +19 -10
- package/dist/pages/toast/toast.js +5 -5
- package/dist/types/components/chips/chip.d.ts +3 -2
- package/dist/types/components/input/input.d.ts +1 -2
- package/dist/types/components/sliders/sliders.d.ts +3 -2
- package/dist/types/directives/svg-component.d.ts +4 -3
- package/dist/types/index.d.ts +2 -1
- package/dist/types/pages/types/type.d.ts +8 -0
- package/package.json +1 -1
|
@@ -19,7 +19,7 @@ const SlideoutMenuComponent = () => {
|
|
|
19
19
|
const [visibleRight3, setVisibleRight3] = (0, react_1.useState)(false);
|
|
20
20
|
const [isChecked, setIsChecked] = (0, react_1.useState)(false);
|
|
21
21
|
const [emailValue, setEmailValue] = (0, react_1.useState)("");
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Slideout Menus" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex justify-content-between px-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Label discription", onClick: () => setVisibleRight(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Messaging", onClick: () => setVisibleRight2(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Payment Cards", onClick: () => setVisibleRight3(true) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight, position: "right", onHide: () => setVisibleRight(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Slideout Menus" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex justify-content-between px-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Label discription", onClick: () => setVisibleRight(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Messaging", onClick: () => setVisibleRight2(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Payment Cards", onClick: () => setVisibleRight3(true) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight, position: "right", onHide: () => setVisibleRight(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slide-out-menu-header-round-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Heading" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "sideout-menu-footer border-1 border-gray-300 border-x-none mt-8 border-bottom-none" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-6 py-4 flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Save" })] })) }))] })), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight2, position: "right", onHide: () => setVisibleRight2(false), className: "w-25rem" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full flex-column align-items-start mb-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Messages" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box w-full flex justify-content-between md:flex-column not-expand mt-6" }, { children: [(0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Recent" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
|
|
23
23
|
position: "absolute",
|
|
24
24
|
right: "0",
|
|
25
25
|
height: "12px",
|
|
@@ -45,7 +45,7 @@ const SlideoutMenuComponent = () => {
|
|
|
45
45
|
height: "12px",
|
|
46
46
|
width: "12px",
|
|
47
47
|
bottom: "0",
|
|
48
|
-
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
48
|
+
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { 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.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Groups" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
|
|
49
49
|
position: "absolute",
|
|
50
50
|
right: "0",
|
|
51
51
|
height: "12px",
|
|
@@ -71,13 +71,13 @@ const SlideoutMenuComponent = () => {
|
|
|
71
71
|
height: "12px",
|
|
72
72
|
width: "12px",
|
|
73
73
|
bottom: "0",
|
|
74
|
-
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
74
|
+
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { 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.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Archive" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
|
|
75
75
|
position: "absolute",
|
|
76
76
|
right: "0",
|
|
77
77
|
height: "12px",
|
|
78
78
|
width: "12px",
|
|
79
79
|
bottom: "0",
|
|
80
|
-
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
80
|
+
} })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { 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.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
|
|
81
81
|
position: "absolute",
|
|
82
82
|
right: "0",
|
|
83
83
|
height: "12px",
|
|
@@ -97,7 +97,7 @@ const SlideoutMenuComponent = () => {
|
|
|
97
97
|
position: "absolute",
|
|
98
98
|
right: "1px",
|
|
99
99
|
top: "1px"
|
|
100
|
-
} })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] }))] }))] }))] })) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight3, position: "right", onHide: () => setVisibleRight3(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
100
|
+
} })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] }))] }))] }))] })) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight3, position: "right", onHide: () => setVisibleRight3(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slide-out-menu-header-round-payment-card-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex w-full flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Payment method" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal mt-1" }, { children: "Update your plan payment details." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between mt-3 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Up to 10 users and 20GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_master_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium line-height-2" }, { children: "Mastercard ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Up to 20 users and 40GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_apple_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Stripe (Visa ending 1234)" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-1" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "payment-method-plus-icon" }), label: "Add payment method", className: "gap-2 text-primary-400 ml-auto mb-0 mt-3 pr-0 font-semibold text-base", link: true }), (0, jsx_runtime_1.jsx)("hr", { className: "w-full border-gray-200 border-1 my-6" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 line-height-2 text-base font-medium" }, { children: "Billing contact" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 line-height-2 mt-1 text-base font-normal" }, { children: "Add a second billing contact email." })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base m-bottom-6 mt-4" }, { children: "Email address" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-input-icon-right mb-6 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) => {
|
|
101
101
|
setEmailValue(e.target.value);
|
|
102
102
|
}, "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)("div", Object.assign({ className: "sideout-menu-footer border-1 border-gray-300 border-x-none algn-self-end mt-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-6 py-4 flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Confirm" })] })) }))] }))] })) }))] }));
|
|
103
103
|
};
|
|
@@ -23,16 +23,16 @@ const TableComponent = () => {
|
|
|
23
23
|
: "border-gray-600 text-gray-700"}` }, { children: rowData.status })));
|
|
24
24
|
};
|
|
25
25
|
const emptyStateTemplate1 = () => {
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center h-20rem gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center h-20rem gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "warning-icon" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center gap-1" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-semibold text-gray-900 line-height-3 text-lg text-center m-0" }, { children: "Something went wrong..." })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal text-center m-0" }, { children: ["We had some trouble loading this page. Please refresh ", (0, jsx_runtime_1.jsx)("br", {}), " the page to try again or get in touch if the problem sticks ", (0, jsx_runtime_1.jsx)("br", {}), "around!"] }))] })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 mt-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, label: "Contact support" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Refresh Page" })] }))] })));
|
|
27
27
|
};
|
|
28
28
|
const nameHeaderTemplate = () => {
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "text-sm text-gray-600 flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "text-sm text-gray-600 flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), "Name"] })));
|
|
30
30
|
};
|
|
31
31
|
const nameBodyTemplate = (rowData) => {
|
|
32
32
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false }), (0, jsx_runtime_1.jsx)("img", { src: rowData.image, className: "border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "line-height-2" }, { children: ["@", rowData.name.split(" ")[0]] }))] }))] })));
|
|
33
33
|
};
|
|
34
34
|
const roleHeaderTemplate = () => {
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-1" }, { children: ["Role ", (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-1" }, { children: ["Role ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle" })] })));
|
|
36
36
|
};
|
|
37
37
|
const teamsBodyTemplate = (rowData) => {
|
|
38
38
|
const { teams } = rowData;
|
|
@@ -51,7 +51,7 @@ const TableComponent = () => {
|
|
|
51
51
|
const pagenatorTemplate = {
|
|
52
52
|
layout: "PrevPageLink PageLinks CurrentPageReport NextPageLink",
|
|
53
53
|
PrevPageLink: (options) => {
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
54
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
55
55
|
},
|
|
56
56
|
PageLinks: (options) => {
|
|
57
57
|
if ((options.view.startPage === options.page &&
|
|
@@ -64,7 +64,7 @@ const TableComponent = () => {
|
|
|
64
64
|
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
|
|
65
65
|
},
|
|
66
66
|
NextPageLink: (options) => {
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
|
|
68
68
|
},
|
|
69
69
|
CurrentPageReport: (options) => {
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
|
package/dist/pages/tags/tags.js
CHANGED
|
@@ -10,52 +10,61 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
|
|
|
10
10
|
const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
|
|
11
11
|
const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
|
|
12
12
|
require("./tags.scss");
|
|
13
|
+
const multiselect_1 = require("primereact/multiselect");
|
|
13
14
|
const TagComponent = () => {
|
|
14
15
|
const [checked, setchecked] = (0, react_1.useState)(false);
|
|
15
|
-
|
|
16
|
+
const [selectedCities, setSelectedCities] = (0, react_1.useState)(null);
|
|
17
|
+
const cities = [
|
|
18
|
+
{ name: 'New York', code: 'NY' },
|
|
19
|
+
{ name: 'Rome', code: 'RM' },
|
|
20
|
+
{ name: 'London', code: 'LDN' },
|
|
21
|
+
{ name: 'Istanbul', code: 'IST' },
|
|
22
|
+
{ name: 'Paris', code: 'PRS' }
|
|
23
|
+
];
|
|
24
|
+
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: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 xl:3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-7" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }) })), (0, jsx_runtime_1.jsx)(tag_1.Tag, { value: "Label", className: "bg-white text-gray-700 border-gray-300 border-1 font-medium px-2 py-1" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-1", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
16
25
|
const el = document.getElementById("chip-1");
|
|
17
26
|
el.remove();
|
|
18
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
27
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center relative text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
19
28
|
setchecked(!checked);
|
|
20
29
|
} }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-2", removable: true, template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => { } }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
21
30
|
const el = document.getElementById("chip-2");
|
|
22
31
|
el.remove();
|
|
23
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
32
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 px-2 py-1 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
24
33
|
setchecked(!checked);
|
|
25
34
|
} }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-3", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
26
35
|
const el = document.getElementById("chip-3");
|
|
27
36
|
el.remove();
|
|
28
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
37
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
29
38
|
setchecked(!checked);
|
|
30
39
|
} }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-4", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
31
40
|
setchecked(!checked);
|
|
32
41
|
} }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
33
42
|
const el = document.getElementById("chip-4");
|
|
34
43
|
el.remove();
|
|
35
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
44
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
36
45
|
setchecked(!checked);
|
|
37
46
|
} }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-5", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
38
47
|
const el = document.getElementById("chip-5");
|
|
39
48
|
el.remove();
|
|
40
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
49
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
41
50
|
setchecked(!checked);
|
|
42
51
|
} }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-6", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
43
52
|
setchecked(!checked);
|
|
44
53
|
} }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
45
54
|
const el = document.getElementById("chip-6");
|
|
46
55
|
el.remove();
|
|
47
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
56
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
48
57
|
setchecked(!checked);
|
|
49
58
|
} }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "h-1rem w-1rem" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-7", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
50
59
|
const el = document.getElementById("chip-7");
|
|
51
60
|
el.remove();
|
|
52
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
61
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
53
62
|
setchecked(!checked);
|
|
54
63
|
} }), (0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-8", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
55
64
|
const el = document.getElementById("chip-8");
|
|
56
65
|
el.remove();
|
|
57
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
66
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
|
|
58
67
|
setchecked(!checked);
|
|
59
|
-
} }), (0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] }))] }))] }));
|
|
68
|
+
} }), (0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full flex justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: selectedCities, onChange: (e) => setSelectedCities(e.value), options: cities, display: "chip", optionLabel: "name", placeholder: "Select Cities", maxSelectedLabels: 3, className: "w-full md:w-20rem" }) }))] }))] }));
|
|
60
69
|
};
|
|
61
70
|
exports.default = TagComponent;
|
|
@@ -12,7 +12,7 @@ const ToastComponent = () => {
|
|
|
12
12
|
var _a;
|
|
13
13
|
(_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
|
|
14
14
|
severity: "success",
|
|
15
|
-
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
15
|
+
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "success-tick-mark" }), "Successfully connected to Quickbooks"] })) })),
|
|
16
16
|
life: 3000,
|
|
17
17
|
});
|
|
18
18
|
};
|
|
@@ -20,7 +20,7 @@ const ToastComponent = () => {
|
|
|
20
20
|
var _a;
|
|
21
21
|
(_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
|
|
22
22
|
severity: "info",
|
|
23
|
-
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
23
|
+
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "info-icon-circle" }), "Default template made inactive"] })) })),
|
|
24
24
|
life: 300000,
|
|
25
25
|
});
|
|
26
26
|
};
|
|
@@ -28,8 +28,8 @@ 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", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
32
|
-
detail: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-6" }, { children: ["Couldn\u2019t connect to the app because of insufficient permissions", (0, jsx_runtime_1.jsxs)("div", Object.assign({ 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, Object.assign({ label: "Retry", link: true, className: "text-white p-0 gap-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
31
|
+
summary: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "info-icon" }), (0, jsx_runtime_1.jsx)("h4", Object.assign({ className: "text-white font-light" }, { children: "There was a problem connecting to the app" }))] }))),
|
|
32
|
+
detail: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-6" }, { children: ["Couldn\u2019t connect to the app because of insufficient permissions", (0, jsx_runtime_1.jsxs)("div", Object.assign({ 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, Object.assign({ label: "Retry", link: true, className: "text-white p-0 gap-2" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" }) }))] }))] })) })),
|
|
33
33
|
life: 300000,
|
|
34
34
|
});
|
|
35
35
|
};
|
|
@@ -37,7 +37,7 @@ const ToastComponent = () => {
|
|
|
37
37
|
var _a;
|
|
38
38
|
(_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
|
|
39
39
|
severity: "warn",
|
|
40
|
-
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
40
|
+
summary: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "success-tick-mark" }), "Successfully connected to Quickbooks"] })) })),
|
|
41
41
|
detail: "Message Content",
|
|
42
42
|
life: 3000,
|
|
43
43
|
});
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { ChipProps } from "primereact/chip";
|
|
2
|
+
declare const ChipTag: (props: ChipProps) => JSX.Element;
|
|
3
|
+
export default ChipTag;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { RangeSliderProps } from "../../pages/types/type";
|
|
2
|
+
declare const RangeSlider: (props: RangeSliderProps) => JSX.Element;
|
|
3
|
+
export default RangeSlider;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
interface icon {
|
|
2
|
-
|
|
2
|
+
icon?: string;
|
|
3
3
|
color?: string;
|
|
4
|
-
|
|
4
|
+
size?: number;
|
|
5
|
+
className?: string;
|
|
5
6
|
}
|
|
6
|
-
declare const SvgComponent: ({
|
|
7
|
+
declare const SvgComponent: ({ icon, size, color, className }: icon) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export default SvgComponent;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { ColorPickerChangeEvent } from "primereact/colorpicker";
|
|
|
3
3
|
import { SliderChangeEvent } from "primereact/slider";
|
|
4
4
|
import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from "primereact/fileupload";
|
|
5
5
|
import { InputNumberValueChangeEvent } from "primereact/inputnumber";
|
|
6
|
+
import { RadioButtonChangeEvent } from 'primereact/radiobutton';
|
|
6
7
|
import { CarouselResponsiveOption } from "primereact/carousel";
|
|
7
8
|
import { MenuItem } from "primereact/menuitem";
|
|
8
9
|
export { default as Button } from "./components/button/button";
|
|
@@ -59,4 +60,4 @@ export { default as ProgressBar } from "./components/progress-bar/progress-bar";
|
|
|
59
60
|
export { default as ProgressSteps } from "./components/progress-steps/progress-steps";
|
|
60
61
|
export { default as CircleProgressComponent } from "./components/progress_bar_round/circle-progress-bar";
|
|
61
62
|
export { default as SvgComponent } from "./directives/svg-component";
|
|
62
|
-
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent };
|
|
63
|
+
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent, RadioButtonChangeEvent };
|
|
@@ -54,3 +54,11 @@ export interface CustomerDataItem {
|
|
|
54
54
|
users: string[];
|
|
55
55
|
licenseUse: number;
|
|
56
56
|
}
|
|
57
|
+
export interface RangeSliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, "value" | "ref"> {
|
|
58
|
+
value: number | [number, number] | undefined;
|
|
59
|
+
min?: number | undefined;
|
|
60
|
+
max?: number | undefined;
|
|
61
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
62
|
+
range?: boolean | undefined;
|
|
63
|
+
indicator?: boolean | undefined;
|
|
64
|
+
}
|