sccoreui 5.2.2 → 5.2.4

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.
Files changed (81) hide show
  1. package/dist/assets/sccoreui.css +3 -3
  2. package/dist/directives/svg-icons.js +41 -0
  3. package/package.json +1 -1
  4. package/dist/pages/avatar/avatar.js +0 -338
  5. package/dist/pages/badges/badge.js +0 -73
  6. package/dist/pages/breadcrumb/breadcrumb.js +0 -14
  7. package/dist/pages/button/button.js +0 -10
  8. package/dist/pages/button-group/button-group.js +0 -10
  9. package/dist/pages/chart/chart.js +0 -257
  10. package/dist/pages/checkbox/checkbox.js +0 -26
  11. package/dist/pages/checkbox-group/checkbox-group-component.js +0 -21
  12. package/dist/pages/color-picker/color-picker.js +0 -13
  13. package/dist/pages/content-dividers/content-dividers.js +0 -11
  14. package/dist/pages/custom-color-picker/custom-color-picker.js +0 -12
  15. package/dist/pages/date-picker/date-picker.js +0 -20
  16. package/dist/pages/dropdown/dropdown-component.js +0 -39
  17. package/dist/pages/file-upload/file-upload.js +0 -34
  18. package/dist/pages/flex.js +0 -15
  19. package/dist/pages/frolaTextEditor/froala-text-editor.js +0 -12
  20. package/dist/pages/home.js +0 -45
  21. package/dist/pages/input/input-text.js +0 -112
  22. package/dist/pages/list-box-dropdown/listboxdropdown.js +0 -50
  23. package/dist/pages/loader-indicator/loader-indicator.js +0 -10
  24. package/dist/pages/mega-mennu/mega-menu.js +0 -84
  25. package/dist/pages/multi-select-dropdown/multi-select-dropdown.js +0 -51
  26. package/dist/pages/not-found/not-found.js +0 -10
  27. package/dist/pages/paginator/pagination.js +0 -122
  28. package/dist/pages/progress-bar/progress-bar.js +0 -27
  29. package/dist/pages/progress-steps/progress-steps.js +0 -24
  30. package/dist/pages/radio-button/radio-button-component.js +0 -11
  31. package/dist/pages/shadows/shadows.js +0 -7
  32. package/dist/pages/slideout-menus/slideout-menus.js +0 -104
  33. package/dist/pages/sliders/slider.js +0 -39
  34. package/dist/pages/tabels/table-data.js +0 -2193
  35. package/dist/pages/tabels/table.js +0 -98
  36. package/dist/pages/tabs/tabs.js +0 -9
  37. package/dist/pages/tags/tags.js +0 -70
  38. package/dist/pages/toast/toast.js +0 -47
  39. package/dist/pages/toggle/toggle.js +0 -10
  40. package/dist/pages/tooltip/tooltip.js +0 -13
  41. package/dist/pages/treeDropdownSelect/treedropdowselect.js +0 -34
  42. package/dist/pages/types/type.js +0 -2
  43. package/dist/types/pages/avatar/avatar.d.ts +0 -2
  44. package/dist/types/pages/badges/badge.d.ts +0 -3
  45. package/dist/types/pages/breadcrumb/breadcrumb.d.ts +0 -2
  46. package/dist/types/pages/button/button.d.ts +0 -2
  47. package/dist/types/pages/button-group/button-group.d.ts +0 -2
  48. package/dist/types/pages/chart/chart.d.ts +0 -2
  49. package/dist/types/pages/checkbox/checkbox.d.ts +0 -2
  50. package/dist/types/pages/checkbox-group/checkbox-group-component.d.ts +0 -3
  51. package/dist/types/pages/color-picker/color-picker.d.ts +0 -2
  52. package/dist/types/pages/content-dividers/content-dividers.d.ts +0 -2
  53. package/dist/types/pages/custom-color-picker/custom-color-picker.d.ts +0 -2
  54. package/dist/types/pages/date-picker/date-picker.d.ts +0 -2
  55. package/dist/types/pages/dropdown/dropdown-component.d.ts +0 -2
  56. package/dist/types/pages/file-upload/file-upload.d.ts +0 -3
  57. package/dist/types/pages/flex.d.ts +0 -2
  58. package/dist/types/pages/frolaTextEditor/froala-text-editor.d.ts +0 -2
  59. package/dist/types/pages/home.d.ts +0 -2
  60. package/dist/types/pages/input/input-text.d.ts +0 -3
  61. package/dist/types/pages/list-box-dropdown/listboxdropdown.d.ts +0 -2
  62. package/dist/types/pages/loader-indicator/loader-indicator.d.ts +0 -3
  63. package/dist/types/pages/mega-mennu/mega-menu.d.ts +0 -2
  64. package/dist/types/pages/multi-select-dropdown/multi-select-dropdown.d.ts +0 -2
  65. package/dist/types/pages/not-found/not-found.d.ts +0 -2
  66. package/dist/types/pages/paginator/pagination.d.ts +0 -2
  67. package/dist/types/pages/progress-bar/progress-bar.d.ts +0 -3
  68. package/dist/types/pages/progress-steps/progress-steps.d.ts +0 -2
  69. package/dist/types/pages/radio-button/radio-button-component.d.ts +0 -2
  70. package/dist/types/pages/shadows/shadows.d.ts +0 -2
  71. package/dist/types/pages/slideout-menus/slideout-menus.d.ts +0 -2
  72. package/dist/types/pages/sliders/slider.d.ts +0 -1
  73. package/dist/types/pages/tabels/table-data.d.ts +0 -3
  74. package/dist/types/pages/tabels/table.d.ts +0 -2
  75. package/dist/types/pages/tabs/tabs.d.ts +0 -3
  76. package/dist/types/pages/tags/tags.d.ts +0 -3
  77. package/dist/types/pages/toast/toast.d.ts +0 -2
  78. package/dist/types/pages/toggle/toggle.d.ts +0 -2
  79. package/dist/types/pages/tooltip/tooltip.d.ts +0 -2
  80. package/dist/types/pages/treeDropdownSelect/treedropdowselect.d.ts +0 -2
  81. package/dist/types/pages/types/type.d.ts +0 -64
@@ -1,98 +0,0 @@
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 datatable_1 = require("primereact/datatable");
6
- const column_1 = require("primereact/column");
7
- const utils_1 = require("primereact/utils");
8
- const ripple_1 = require("primereact/ripple");
9
- const button_1 = require("primereact/button");
10
- const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
11
- const table_data_1 = require("./table-data");
12
- const checkbox_1 = require("primereact/checkbox");
13
- const avatargroup_1 = require("primereact/avatargroup");
14
- const avatar_1 = require("primereact/avatar");
15
- const progressbar_1 = require("primereact/progressbar");
16
- const TableComponent = () => {
17
- const statusTemplate1 = (rowData) => {
18
- return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-1 px-2 text-green-700 w-4rem text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " ", rowData.status] })));
19
- };
20
- const statusTemplate2 = (rowData) => {
21
- return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `bg-transparent border-round-2xl px-2 border-1 ${rowData.status === "Customer"
22
- ? "border-green-600 text-green-700"
23
- : "border-gray-600 text-gray-700"}` }, { children: rowData.status })));
24
- };
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, { 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
- };
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, { icon: "check-selected" }) }), "Name"] })));
30
- };
31
- const nameBodyTemplate = (rowData) => {
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
- };
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, { icon: "help-circle" })] })));
36
- };
37
- const teamsBodyTemplate = (rowData) => {
38
- const { teams } = rowData;
39
- return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex gap-1" }, { children: [teams.slice(0, 3).map((eachName) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${eachName === "Design"
40
- ? "bg-primary-50 text-primary-700"
41
- : eachName === "Product"
42
- ? "bg-blue-50 text-blue-700"
43
- : "bg-indigo-50 text-indigo-700"} text-sm font-medium border-round-2xl px-2` }, { children: eachName }), eachName))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-gray-100 border-round-2xl px-2 text-gray-700" }, { children: ["+", teams.length - 3] }))] })));
44
- };
45
- const actionButtonTemplate1 = () => {
46
- return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-trash" }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-pencil" })] })));
47
- };
48
- const actionButtonTemplate2 = () => {
49
- return (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-ellipsis-v" });
50
- };
51
- const pagenatorTemplate = {
52
- layout: "PrevPageLink PageLinks CurrentPageReport NextPageLink",
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, { 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
- },
56
- PageLinks: (options) => {
57
- if ((options.view.startPage === options.page &&
58
- options.view.startPage !== 0) ||
59
- (options.view.endPage === options.page &&
60
- options.page + 1 !== options.totalPages)) {
61
- const className = (0, utils_1.classNames)(options.className, { "p-disabled": true });
62
- return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." }));
63
- }
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
- },
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, { icon: "arrow-right-gray-700" })] })));
68
- },
69
- CurrentPageReport: (options) => {
70
- return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
71
- color: "var(--gray-700)",
72
- userSelect: "none",
73
- width: "120px",
74
- textAlign: "center",
75
- }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
76
- },
77
- };
78
- const tableHeaderTemplate1 = () => {
79
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-xl font-semibold bg-white text-gray-900" }, { children: ["Team Members", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-round-2xl px-2 font-medium bg-primary-50 text-primary-700 text-sm" }, { children: "100 users" })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
80
- };
81
- const tableHeaderTemplate2 = () => {
82
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-semibold text-xl line-height-4" }, { children: "Customers" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: "These companies have purchased in the last 12 months." }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
83
- };
84
- const companyBodyTemplate = (rowData) => {
85
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(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" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-medium text-base line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.website }))] }))] })));
86
- };
87
- const aboutBodyTemplate = (rowData) => {
88
- return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-normal text-base line-height-2" }, { children: rowData.about.title })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.about.description }))] })));
89
- };
90
- const usersBodyTemplate = (rowData) => {
91
- return ((0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, Object.assign({ className: "w-10" }, { children: [rowData.users.slice(0, 5).map((eachUser) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: eachUser, shape: "circle", size: "large" }, eachUser))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: `+${rowData.users.length - 5}`, shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] })));
92
- };
93
- const licenseBodyTemplate = (rowData) => {
94
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-10rem align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: rowData.licenseUse, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2 flex align-items-start text-center text-sm" }, { children: [rowData.licenseUse, "%"] }))] })));
95
- };
96
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.teamData, paginator: true, paginatorClassName: "bg-square px-6 py-3", paginatorTemplate: pagenatorTemplate, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate1, emptyMessage: emptyStateTemplate1, className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: nameHeaderTemplate, body: nameBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", sortable: true, headerClassName: "h-3rem text-sm text-gray-600", body: statusTemplate1, style: { width: "7rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: roleHeaderTemplate, headerClassName: "h-3rem text-sm text-gray-600", field: "role", style: { width: "11rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Email address", headerClassName: "h-3rem text-sm text-gray-600", field: "email", style: { width: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Teams", body: teamsBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate1, style: { width: "7rem" } })] })), (0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.customersData, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate2, emptyMessage: "No customers found.", className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: "Company", body: companyBodyTemplate, sortable: true, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", body: statusTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "About", body: aboutBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "20rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Users", body: usersBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "License Use", body: licenseBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "4rem" } })] }))] })));
97
- };
98
- exports.default = TableComponent;
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const tabview_1 = require("primereact/tabview");
5
- require("./tabs.scss");
6
- const TabsComponent = () => {
7
- 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: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark responsive flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box responsive flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
8
- };
9
- exports.default = TabsComponent;
@@ -1,70 +0,0 @@
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 tag_1 = require("primereact/tag");
6
- const chip_1 = require("primereact/chip");
7
- const checkbox_1 = require("primereact/checkbox");
8
- const react_1 = require("react");
9
- const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
10
- const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
11
- const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
12
- require("./tags.scss");
13
- const multiselect_1 = require("primereact/multiselect");
14
- const TagComponent = () => {
15
- const [checked, setchecked] = (0, react_1.useState)(false);
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: () => {
25
- const el = document.getElementById("chip-1");
26
- el.remove();
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: () => {
28
- setchecked(!checked);
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: () => {
30
- const el = document.getElementById("chip-2");
31
- el.remove();
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: () => {
33
- setchecked(!checked);
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: () => {
35
- const el = document.getElementById("chip-3");
36
- el.remove();
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: () => {
38
- setchecked(!checked);
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: () => {
40
- setchecked(!checked);
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: () => {
42
- const el = document.getElementById("chip-4");
43
- el.remove();
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: () => {
45
- setchecked(!checked);
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: () => {
47
- const el = document.getElementById("chip-5");
48
- el.remove();
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: () => {
50
- setchecked(!checked);
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: () => {
52
- setchecked(!checked);
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: () => {
54
- const el = document.getElementById("chip-6");
55
- el.remove();
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: () => {
57
- setchecked(!checked);
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: () => {
59
- const el = document.getElementById("chip-7");
60
- el.remove();
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: () => {
62
- setchecked(!checked);
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: () => {
64
- const el = document.getElementById("chip-8");
65
- el.remove();
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: () => {
67
- setchecked(!checked);
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" }) }))] }))] }));
69
- };
70
- exports.default = TagComponent;
@@ -1,47 +0,0 @@
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 button_1 = require("primereact/button");
6
- const toast_1 = require("primereact/toast");
7
- const react_1 = require("react");
8
- const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
9
- const ToastComponent = () => {
10
- const toast = (0, react_1.useRef)(null);
11
- const showSuccess = () => {
12
- var _a;
13
- (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
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, { icon: "success-tick-mark" }), "Successfully connected to Quickbooks"] })) })),
16
- life: 3000,
17
- });
18
- };
19
- const showInfo = () => {
20
- var _a;
21
- (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
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, { icon: "info-icon-circle" }), "Default template made inactive"] })) })),
24
- life: 300000,
25
- });
26
- };
27
- const showError = () => {
28
- var _a;
29
- (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
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, { 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
- life: 300000,
34
- });
35
- };
36
- const showWarning = () => {
37
- var _a;
38
- (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
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, { icon: "success-tick-mark" }), "Successfully connected to Quickbooks"] })) })),
41
- detail: "Message Content",
42
- life: 3000,
43
- });
44
- };
45
- 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: "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", Object.assign({ 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
- };
47
- exports.default = ToastComponent;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const jsx_runtime_1 = require("react/jsx-runtime");
4
- const inputswitch_1 = require("primereact/inputswitch");
5
- const react_1 = require("react");
6
- const ToggleSwitch = () => {
7
- const [isChecked, setIsChecked] = (0, react_1.useState)(false);
8
- 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: "Toggle Switch" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-5 mb-5 p-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-light" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }))] }));
9
- };
10
- exports.default = ToggleSwitch;
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TooltipComponent = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const tooltip_1 = require("primereact/tooltip");
6
- const TooltipComponent = () => {
7
- const content = () => {
8
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "m-0 flex flex-column gap-1 px-0 shadow-none" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "p-0 m-0 font-semibold shadow-none" }, { children: "This is a Tooltip" })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "p-0 m-0 font-medium shadow-none" }, { children: ["Tooltips are used to describe or identify an ", (0, jsx_runtime_1.jsx)("br", {}), " element. In most scenarios, tooltips help the user ", (0, jsx_runtime_1.jsx)("br", {}), " understand meaning, function or alt-text."] }))] })));
9
- };
10
- 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: "Tooltips" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-dark", position: "top", content: "No", className: "mb-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-dark", position: "bottom", content: "T00dfsgdfgdfgfdg", className: "mt-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-dark", position: "left", content: "This is a tooltip", className: "mr-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-dark", position: "right", hideDelay: 100000, content: "This is a tooltip", className: "ml-1" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-light", position: "top", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-light", position: "bottom", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-light", position: "left", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-light", position: "right", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top", position: "top" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom", position: "bottom" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left", position: "left" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right", position: "right" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top-light", position: "top", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom-light", position: "bottom", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left-light", position: "left", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right-light", position: "right", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] }))] }))] }));
11
- };
12
- exports.TooltipComponent = TooltipComponent;
13
- exports.default = exports.TooltipComponent;
@@ -1,34 +0,0 @@
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 treeDropdownSelect_1 = tslib_1.__importDefault(require("../../components/treeDropdownSelect/treeDropdownSelect"));
6
- const CustomTreeDropdownSelect = () => {
7
- const expandedKeys = ['1', '2', '3', '4', '5'];
8
- const treeData = [
9
- {
10
- key: "0",
11
- moduleName: 'Installation',
12
- children: [
13
- { key: "0-0", moduleName: 'Getting Started', url: 'https://reactjs.org/docs/getting-started.html' },
14
- { key: "0-1", moduleName: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html' },
15
- { key: "0-2", moduleName: 'Create an App', url: 'https://reactjs.org/docs/create-a-new-react-app.html' },
16
- { key: "0-3", moduleName: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html' }
17
- ]
18
- },
19
- {
20
- key: "1",
21
- moduleName: 'Main Concepts',
22
- children: [
23
- { key: "1-0", moduleName: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html' },
24
- { key: "1-1", moduleName: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html' },
25
- { key: "1-2", moduleName: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html' },
26
- { key: "1-3", moduleName: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html' },
27
- { key: "1-4", moduleName: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html' },
28
- { key: "1-5", moduleName: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html' }
29
- ]
30
- }
31
- ];
32
- return ((0, jsx_runtime_1.jsx)(treeDropdownSelect_1.default, { treeData: treeData, expandedKeys: expandedKeys }));
33
- };
34
- exports.default = CustomTreeDropdownSelect;
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,2 +0,0 @@
1
- declare const avatar: () => import("react/jsx-runtime").JSX.Element;
2
- export default avatar;
@@ -1,3 +0,0 @@
1
- import "./badge.scss";
2
- declare const BadgeComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default BadgeComponent;
@@ -1,2 +0,0 @@
1
- declare const BreadCrumbComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default BreadCrumbComponent;
@@ -1,2 +0,0 @@
1
- declare const ButtonComponent: () => JSX.Element;
2
- export default ButtonComponent;
@@ -1,2 +0,0 @@
1
- declare const ButtonGroupComponent: () => JSX.Element;
2
- export default ButtonGroupComponent;
@@ -1,2 +0,0 @@
1
- declare const ChartsComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ChartsComponent;
@@ -1,2 +0,0 @@
1
- declare const CheckboxComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default CheckboxComponent;
@@ -1,3 +0,0 @@
1
- import "./checkbox-group-component.scss";
2
- declare const CheckboxGroupComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default CheckboxGroupComponent;
@@ -1,2 +0,0 @@
1
- declare const ColorPickerComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ColorPickerComponent;
@@ -1,2 +0,0 @@
1
- declare const ContentDividersComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ContentDividersComponent;
@@ -1,2 +0,0 @@
1
- declare const CustomColorPickerPage: () => import("react/jsx-runtime").JSX.Element;
2
- export default CustomColorPickerPage;
@@ -1,2 +0,0 @@
1
- declare const DatePickerComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default DatePickerComponent;
@@ -1,2 +0,0 @@
1
- declare const DropdownComponent: () => JSX.Element;
2
- export default DropdownComponent;
@@ -1,3 +0,0 @@
1
- import "./file-upload.scss";
2
- declare const FileUploadComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default FileUploadComponent;
@@ -1,2 +0,0 @@
1
- export default Flex;
2
- declare function Flex(): import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- declare const FroalaTextEditorPage: () => import("react/jsx-runtime").JSX.Element;
2
- export default FroalaTextEditorPage;
@@ -1,2 +0,0 @@
1
- declare const Home: () => import("react/jsx-runtime").JSX.Element;
2
- export default Home;
@@ -1,3 +0,0 @@
1
- import "./input-text.scss";
2
- declare const InputComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default InputComponent;
@@ -1,2 +0,0 @@
1
- declare const ListBoxPage: () => import("react/jsx-runtime").JSX.Element;
2
- export default ListBoxPage;
@@ -1,3 +0,0 @@
1
- import "./loader-indicator.scss";
2
- declare const LoaderIndicatorComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default LoaderIndicatorComponent;
@@ -1,2 +0,0 @@
1
- declare const HeaderComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default HeaderComponent;
@@ -1,2 +0,0 @@
1
- declare const CustomSelect: () => import("react/jsx-runtime").JSX.Element;
2
- export default CustomSelect;
@@ -1,2 +0,0 @@
1
- declare const NotFoundPage: () => import("react/jsx-runtime").JSX.Element;
2
- export default NotFoundPage;
@@ -1,2 +0,0 @@
1
- import "./pagination.scss";
2
- export default function TemplateDemo(): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import "./progress-bar.scss";
2
- declare const ProgressBarComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default ProgressBarComponent;
@@ -1,2 +0,0 @@
1
- declare const ProgressStepsComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ProgressStepsComponent;
@@ -1,2 +0,0 @@
1
- declare const RadioButtonComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default RadioButtonComponent;
@@ -1,2 +0,0 @@
1
- declare const ShadowComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ShadowComponent;
@@ -1,2 +0,0 @@
1
- declare const SlideoutMenuComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default SlideoutMenuComponent;
@@ -1 +0,0 @@
1
- export default function (): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +0,0 @@
1
- import { CustomerDataItem, TeamDataItem } from "../types/type";
2
- export declare const teamData: TeamDataItem[];
3
- export declare const customersData: CustomerDataItem[];
@@ -1,2 +0,0 @@
1
- declare const TableComponent: () => JSX.Element;
2
- export default TableComponent;
@@ -1,3 +0,0 @@
1
- import "./tabs.scss";
2
- declare const TabsComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default TabsComponent;
@@ -1,3 +0,0 @@
1
- import "./tags.scss";
2
- declare const TagComponent: () => import("react/jsx-runtime").JSX.Element;
3
- export default TagComponent;
@@ -1,2 +0,0 @@
1
- declare const ToastComponent: () => import("react/jsx-runtime").JSX.Element;
2
- export default ToastComponent;
@@ -1,2 +0,0 @@
1
- declare const ToggleSwitch: () => JSX.Element;
2
- export default ToggleSwitch;
@@ -1,2 +0,0 @@
1
- export declare const TooltipComponent: () => JSX.Element;
2
- export default TooltipComponent;
@@ -1,2 +0,0 @@
1
- declare const CustomTreeDropdownSelect: () => import("react/jsx-runtime").JSX.Element;
2
- export default CustomTreeDropdownSelect;