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.
- package/dist/assets/sccoreui.css +3 -3
- package/dist/directives/svg-icons.js +41 -0
- package/package.json +1 -1
- package/dist/pages/avatar/avatar.js +0 -338
- package/dist/pages/badges/badge.js +0 -73
- package/dist/pages/breadcrumb/breadcrumb.js +0 -14
- package/dist/pages/button/button.js +0 -10
- package/dist/pages/button-group/button-group.js +0 -10
- package/dist/pages/chart/chart.js +0 -257
- package/dist/pages/checkbox/checkbox.js +0 -26
- package/dist/pages/checkbox-group/checkbox-group-component.js +0 -21
- package/dist/pages/color-picker/color-picker.js +0 -13
- package/dist/pages/content-dividers/content-dividers.js +0 -11
- package/dist/pages/custom-color-picker/custom-color-picker.js +0 -12
- package/dist/pages/date-picker/date-picker.js +0 -20
- package/dist/pages/dropdown/dropdown-component.js +0 -39
- package/dist/pages/file-upload/file-upload.js +0 -34
- package/dist/pages/flex.js +0 -15
- package/dist/pages/frolaTextEditor/froala-text-editor.js +0 -12
- package/dist/pages/home.js +0 -45
- package/dist/pages/input/input-text.js +0 -112
- package/dist/pages/list-box-dropdown/listboxdropdown.js +0 -50
- package/dist/pages/loader-indicator/loader-indicator.js +0 -10
- package/dist/pages/mega-mennu/mega-menu.js +0 -84
- package/dist/pages/multi-select-dropdown/multi-select-dropdown.js +0 -51
- package/dist/pages/not-found/not-found.js +0 -10
- package/dist/pages/paginator/pagination.js +0 -122
- package/dist/pages/progress-bar/progress-bar.js +0 -27
- package/dist/pages/progress-steps/progress-steps.js +0 -24
- package/dist/pages/radio-button/radio-button-component.js +0 -11
- package/dist/pages/shadows/shadows.js +0 -7
- package/dist/pages/slideout-menus/slideout-menus.js +0 -104
- package/dist/pages/sliders/slider.js +0 -39
- package/dist/pages/tabels/table-data.js +0 -2193
- package/dist/pages/tabels/table.js +0 -98
- package/dist/pages/tabs/tabs.js +0 -9
- package/dist/pages/tags/tags.js +0 -70
- package/dist/pages/toast/toast.js +0 -47
- package/dist/pages/toggle/toggle.js +0 -10
- package/dist/pages/tooltip/tooltip.js +0 -13
- package/dist/pages/treeDropdownSelect/treedropdowselect.js +0 -34
- package/dist/pages/types/type.js +0 -2
- package/dist/types/pages/avatar/avatar.d.ts +0 -2
- package/dist/types/pages/badges/badge.d.ts +0 -3
- package/dist/types/pages/breadcrumb/breadcrumb.d.ts +0 -2
- package/dist/types/pages/button/button.d.ts +0 -2
- package/dist/types/pages/button-group/button-group.d.ts +0 -2
- package/dist/types/pages/chart/chart.d.ts +0 -2
- package/dist/types/pages/checkbox/checkbox.d.ts +0 -2
- package/dist/types/pages/checkbox-group/checkbox-group-component.d.ts +0 -3
- package/dist/types/pages/color-picker/color-picker.d.ts +0 -2
- package/dist/types/pages/content-dividers/content-dividers.d.ts +0 -2
- package/dist/types/pages/custom-color-picker/custom-color-picker.d.ts +0 -2
- package/dist/types/pages/date-picker/date-picker.d.ts +0 -2
- package/dist/types/pages/dropdown/dropdown-component.d.ts +0 -2
- package/dist/types/pages/file-upload/file-upload.d.ts +0 -3
- package/dist/types/pages/flex.d.ts +0 -2
- package/dist/types/pages/frolaTextEditor/froala-text-editor.d.ts +0 -2
- package/dist/types/pages/home.d.ts +0 -2
- package/dist/types/pages/input/input-text.d.ts +0 -3
- package/dist/types/pages/list-box-dropdown/listboxdropdown.d.ts +0 -2
- package/dist/types/pages/loader-indicator/loader-indicator.d.ts +0 -3
- package/dist/types/pages/mega-mennu/mega-menu.d.ts +0 -2
- package/dist/types/pages/multi-select-dropdown/multi-select-dropdown.d.ts +0 -2
- package/dist/types/pages/not-found/not-found.d.ts +0 -2
- package/dist/types/pages/paginator/pagination.d.ts +0 -2
- package/dist/types/pages/progress-bar/progress-bar.d.ts +0 -3
- package/dist/types/pages/progress-steps/progress-steps.d.ts +0 -2
- package/dist/types/pages/radio-button/radio-button-component.d.ts +0 -2
- package/dist/types/pages/shadows/shadows.d.ts +0 -2
- package/dist/types/pages/slideout-menus/slideout-menus.d.ts +0 -2
- package/dist/types/pages/sliders/slider.d.ts +0 -1
- package/dist/types/pages/tabels/table-data.d.ts +0 -3
- package/dist/types/pages/tabels/table.d.ts +0 -2
- package/dist/types/pages/tabs/tabs.d.ts +0 -3
- package/dist/types/pages/tags/tags.d.ts +0 -3
- package/dist/types/pages/toast/toast.d.ts +0 -2
- package/dist/types/pages/toggle/toggle.d.ts +0 -2
- package/dist/types/pages/tooltip/tooltip.d.ts +0 -2
- package/dist/types/pages/treeDropdownSelect/treedropdowselect.d.ts +0 -2
- package/dist/types/pages/types/type.d.ts +0 -64
package/dist/assets/sccoreui.css
CHANGED
|
@@ -4087,7 +4087,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
|
|
|
4087
4087
|
.p-datatable.p-datatable-selectable
|
|
4088
4088
|
.p-datatable-tbody
|
|
4089
4089
|
> tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
|
4090
|
-
background:
|
|
4090
|
+
background: var(--gray-50);
|
|
4091
4091
|
color: #495057;
|
|
4092
4092
|
}
|
|
4093
4093
|
.p-datatable.p-datatable-selectable
|
|
@@ -4100,7 +4100,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
|
|
|
4100
4100
|
.p-datatable-tbody
|
|
4101
4101
|
> tr.p-selectable-row
|
|
4102
4102
|
> td.p-selectable-cell:not(.p-highlight):hover {
|
|
4103
|
-
background:
|
|
4103
|
+
background: var(--gray-50);
|
|
4104
4104
|
color: #495057;
|
|
4105
4105
|
}
|
|
4106
4106
|
.p-datatable.p-datatable-selectable-cell
|
|
@@ -4113,7 +4113,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--gray-100);
|
|
|
4113
4113
|
.p-datatable.p-datatable-hoverable-rows
|
|
4114
4114
|
.p-datatable-tbody
|
|
4115
4115
|
> tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
|
|
4116
|
-
background:
|
|
4116
|
+
background: var(--gray-50) !important;
|
|
4117
4117
|
color: #495057;
|
|
4118
4118
|
}
|
|
4119
4119
|
.p-datatable .p-column-resizer-helper {
|
|
@@ -8982,6 +8982,47 @@ exports.iconList = [
|
|
|
8982
8982
|
</svg>
|
|
8983
8983
|
`,
|
|
8984
8984
|
},
|
|
8985
|
+
{
|
|
8986
|
+
name: "bool-array",
|
|
8987
|
+
svg: `<svg width="24" height="24" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8988
|
+
<path d="M1.33333 1.23126V10.7687H3.01424C3.16309 10.7687 3.28429 10.8155 3.37785 10.9091C3.47567 11.0027 3.52458 11.1132 3.52458 11.2408V11.3333C3.52458 11.7015 3.2261 12 2.85791 12H0.666667C0.298478 12 0 11.7015 0 11.3333V0.666667C0 0.298477 0.298477 0 0.666667 0H2.85791C3.2261 0 3.52458 0.298477 3.52458 0.666667V0.752791C3.52458 0.884636 3.47567 0.997342 3.37785 1.09091C3.28429 1.18448 3.16309 1.23126 3.01424 1.23126H1.33333Z" fill="#667085"/>
|
|
8989
|
+
<path d="M10.6667 1.23126V10.7687H8.98576C8.83691 10.7687 8.71571 10.8155 8.62215 10.9091C8.52433 11.0027 8.47542 11.1132 8.47542 11.2408V11.3333C8.47542 11.7015 8.7739 12 9.14209 12H11.3333C11.7015 12 12 11.7015 12 11.3333V0.666667C12 0.298477 11.7015 0 11.3333 0H9.14209C8.7739 0 8.47542 0.298477 8.47542 0.666667V0.752791C8.47542 0.884636 8.52433 0.997342 8.62215 1.09091C8.71571 1.18448 8.83691 1.23126 8.98576 1.23126H10.6667Z" fill="#667085"/>
|
|
8990
|
+
<path d="M10.0673 7.5347V7.89468H8.03452V7.5347H8.84711V4.9487C8.84711 4.87105 8.84976 4.79253 8.85505 4.71312L8.1801 5.29279C8.15716 5.3122 8.13422 5.32455 8.11128 5.32985C8.08834 5.33338 8.06716 5.33338 8.04775 5.32985C8.02834 5.32632 8.00981 5.31926 7.99217 5.30867C7.97629 5.29808 7.96393 5.28661 7.95511 5.27426L7.80688 5.07045L8.93711 4.09375H9.32091V7.5347H10.0673Z" fill="#667085"/>
|
|
8991
|
+
<path d="M5.61176 7.95445C5.58882 8.01621 5.55264 8.06209 5.50324 8.09209C5.45559 8.12209 5.40618 8.13709 5.35501 8.13709H5.15649L6.74727 4.17469C6.76845 4.11823 6.80021 4.075 6.84256 4.045C6.88668 4.015 6.93697 4 6.99343 4H7.1946L5.61176 7.95445Z" fill="#667085"/>
|
|
8992
|
+
<path d="M4.8199 6.00267C4.8199 6.33441 4.78373 6.62204 4.71138 6.86556C4.6408 7.1073 4.54374 7.30759 4.42022 7.4664C4.2967 7.62521 4.15024 7.74344 3.98084 7.82108C3.8132 7.89872 3.63321 7.93755 3.44087 7.93755C3.24677 7.93755 3.0659 7.89872 2.89826 7.82108C2.73239 7.74344 2.58769 7.62521 2.46417 7.4664C2.34065 7.30759 2.2436 7.1073 2.17301 6.86556C2.10243 6.62204 2.06714 6.33441 2.06714 6.00267C2.06714 5.67093 2.10243 5.3833 2.17301 5.13978C2.2436 4.89627 2.34065 4.69511 2.46417 4.53629C2.58769 4.37572 2.73239 4.25661 2.89826 4.17896C3.0659 4.10132 3.24677 4.0625 3.44087 4.0625C3.63321 4.0625 3.8132 4.10132 3.98084 4.17896C4.15024 4.25661 4.2967 4.37572 4.42022 4.53629C4.54374 4.69511 4.6408 4.89627 4.71138 5.13978C4.78373 5.3833 4.8199 5.67093 4.8199 6.00267ZM4.33023 6.00267C4.33023 5.71328 4.30552 5.47065 4.25612 5.27478C4.20847 5.07714 4.14318 4.91833 4.06025 4.79834C3.97907 4.67834 3.88467 4.59276 3.77703 4.54159C3.66939 4.48865 3.55734 4.46218 3.44087 4.46218C3.32441 4.46218 3.21236 4.48865 3.10472 4.54159C2.99708 4.59276 2.90267 4.67834 2.8215 4.79834C2.74033 4.91833 2.67504 5.07714 2.62563 5.27478C2.57799 5.47065 2.55417 5.71328 2.55417 6.00267C2.55417 6.29206 2.57799 6.53469 2.62563 6.73056C2.67504 6.92643 2.74033 7.08436 2.8215 7.20436C2.90267 7.32435 2.99708 7.41081 3.10472 7.46375C3.21236 7.51493 3.32441 7.54051 3.44087 7.54051C3.55734 7.54051 3.66939 7.51493 3.77703 7.46375C3.88467 7.41081 3.97907 7.32435 4.06025 7.20436C4.14318 7.08436 4.20847 6.92643 4.25612 6.73056C4.30552 6.53469 4.33023 6.29206 4.33023 6.00267Z" fill="#667085"/>
|
|
8993
|
+
</svg>
|
|
8994
|
+
`,
|
|
8995
|
+
},
|
|
8996
|
+
{
|
|
8997
|
+
name: "boolean",
|
|
8998
|
+
svg: `<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8999
|
+
<path d="M14.0671 10.2706V10.8106H11.0179V10.2706H12.2368V6.39175C12.2368 6.27529 12.2408 6.15751 12.2487 6.0384L11.2363 6.90787C11.2019 6.93699 11.1675 6.95551 11.1331 6.96345C11.0987 6.96875 11.0669 6.96875 11.0378 6.96345C11.0087 6.95816 10.9809 6.94757 10.9544 6.93169C10.9306 6.91581 10.9121 6.89861 10.8988 6.88008L10.6765 6.57438L12.3718 5.10938H12.9475V10.2706H14.0671Z" fill="#667085"/>
|
|
9000
|
+
<path d="M7.3838 10.9002C7.34939 10.9929 7.29513 11.0617 7.22102 11.1067C7.14956 11.1517 7.07545 11.1742 6.99869 11.1742H6.70093L9.08701 5.23078C9.11877 5.14609 9.16642 5.08124 9.22994 5.03624C9.29611 4.99125 9.37154 4.96875 9.45624 4.96875H9.75797L7.3838 10.9002Z" fill="#667085"/>
|
|
9001
|
+
<path d="M6.19614 7.97265C6.19614 8.47025 6.14188 8.90167 6.03336 9.26693C5.92749 9.62954 5.78191 9.92995 5.59664 10.1682C5.41136 10.4064 5.19168 10.5837 4.93759 10.7002C4.68614 10.8166 4.41617 10.8749 4.12767 10.8749C3.83652 10.8749 3.56522 10.8166 3.31378 10.7002C3.06498 10.5837 2.84794 10.4064 2.66267 10.1682C2.47739 9.92995 2.33182 9.62954 2.22595 9.26693C2.12007 8.90167 2.06714 8.47025 2.06714 7.97265C2.06714 7.47505 2.12007 7.04363 2.22595 6.67837C2.33182 6.31311 2.47739 6.01138 2.66267 5.77316C2.84794 5.53231 3.06498 5.35365 3.31378 5.23719C3.56522 5.12073 3.83652 5.0625 4.12767 5.0625C4.41617 5.0625 4.68614 5.12073 4.93759 5.23719C5.19168 5.35365 5.41136 5.53231 5.59664 5.77316C5.78191 6.01138 5.92749 6.31311 6.03336 6.67837C6.14188 7.04363 6.19614 7.47505 6.19614 7.97265ZM5.46165 7.97265C5.46165 7.53858 5.4246 7.17464 5.35049 6.88085C5.27902 6.58441 5.18109 6.3462 5.05669 6.16621C4.93494 5.98623 4.79334 5.85786 4.63188 5.7811C4.47043 5.7017 4.30236 5.662 4.12767 5.662C3.95298 5.662 3.78491 5.7017 3.62345 5.7811C3.462 5.85786 3.3204 5.98623 3.19864 6.16621C3.07689 6.3462 2.97896 6.58441 2.90485 6.88085C2.83339 7.17464 2.79765 7.53858 2.79765 7.97265C2.79765 8.40672 2.83339 8.77066 2.90485 9.06445C2.97896 9.35825 3.07689 9.59513 3.19864 9.77512C3.3204 9.9551 3.462 10.0848 3.62345 10.1642C3.78491 10.241 3.95298 10.2793 4.12767 10.2793C4.30236 10.2793 4.47043 10.241 4.63188 10.1642C4.79334 10.0848 4.93494 9.9551 5.05669 9.77512C5.18109 9.59513 5.27902 9.35825 5.35049 9.06445C5.4246 8.77066 5.46165 8.40672 5.46165 7.97265Z" fill="#667085"/>
|
|
9002
|
+
</svg>
|
|
9003
|
+
`,
|
|
9004
|
+
},
|
|
9005
|
+
{
|
|
9006
|
+
name: "array-object",
|
|
9007
|
+
svg: `<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
9008
|
+
<path d="M3.33333 3.23126V12.7687H5.01424C5.16309 12.7687 5.28429 12.8155 5.37785 12.9091C5.47567 13.0027 5.52458 13.1132 5.52458 13.2408V13.3333C5.52458 13.7015 5.2261 14 4.85791 14H2.66667C2.29848 14 2 13.7015 2 13.3333V2.66667C2 2.29848 2.29848 2 2.66667 2H4.85791C5.2261 2 5.52458 2.29848 5.52458 2.66667V2.75279C5.52458 2.88464 5.47567 2.99734 5.37785 3.09091C5.28429 3.18448 5.16309 3.23126 5.01424 3.23126H3.33333Z" fill="#667085"/>
|
|
9009
|
+
<path d="M12.6667 3.23126V12.7687H10.9858C10.8369 12.7687 10.7157 12.8155 10.6221 12.9091C10.5243 13.0027 10.4754 13.1132 10.4754 13.2408V13.3333C10.4754 13.7015 10.7739 14 11.1421 14H13.3333C13.7015 14 14 13.7015 14 13.3333V2.66667C14 2.29848 13.7015 2 13.3333 2H11.1421C10.7739 2 10.4754 2.29848 10.4754 2.66667V2.75279C10.4754 2.88464 10.5243 2.99734 10.6221 3.09091C10.7157 3.18448 10.8369 3.23126 10.9858 3.23126H12.6667Z" fill="#667085"/>
|
|
9010
|
+
<path d="M10.1903 10.6654C10.611 10.6654 10.9523 10.3244 10.9523 9.90336V8.3797L11.3333 7.9987L10.9523 7.6177V6.09403C10.9523 5.67303 10.6113 5.33203 10.1903 5.33203M5.80975 5.33203C5.38875 5.33203 5.04775 5.67303 5.04775 6.09403V7.6177L4.66675 7.9987L5.04775 8.3797V9.90336C5.04775 10.3244 5.38875 10.6654 5.80975 10.6654" stroke="#667085" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9011
|
+
</svg>
|
|
9012
|
+
`,
|
|
9013
|
+
},
|
|
9014
|
+
{
|
|
9015
|
+
name: "formula-icon",
|
|
9016
|
+
svg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 10 10" fill="none">
|
|
9017
|
+
<mask id="mask0_2064_125792" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
|
|
9018
|
+
<rect x="0.65918" y="0.65918" width="8.68133" height="8.68161" fill="#D9D9D9"/>
|
|
9019
|
+
</mask>
|
|
9020
|
+
<g mask="url(#mask0_2064_125792)">
|
|
9021
|
+
<path d="M4.27619 7.16917V6.44571H4.83686L5.78638 5.3605L4.83686 4.2753H4.24002L3.66127 7.38621C3.61304 7.65751 3.50151 7.87003 3.32667 8.02377C3.15184 8.17751 2.92878 8.25437 2.65749 8.25437C2.3862 8.25437 2.16615 8.18203 1.99735 8.03733C1.82854 7.89264 1.74414 7.69972 1.74414 7.45856C1.74414 7.26564 1.79538 7.11039 1.89787 6.99283C2.00036 6.87526 2.12998 6.81648 2.28672 6.81648C2.43744 6.81648 2.56555 6.86773 2.67105 6.97022C2.77656 7.07271 2.82931 7.1963 2.82931 7.341C2.82931 7.37114 2.8278 7.39827 2.82478 7.42239C2.82177 7.4465 2.81725 7.47363 2.81122 7.50378C2.84136 7.49775 2.86699 7.48117 2.88809 7.45404C2.90919 7.42691 2.92577 7.38923 2.93782 7.341L3.49849 4.2753H2.46758V3.55183H3.63414L3.82404 2.52089C3.86624 2.29179 3.97928 2.1049 4.16316 1.9602C4.34703 1.81551 4.56557 1.74316 4.81878 1.74316C5.08404 1.74316 5.30107 1.82154 5.46988 1.97829C5.63868 2.13504 5.72308 2.33098 5.72308 2.56611C5.72308 2.74698 5.67184 2.89619 5.56935 3.01375C5.46686 3.13132 5.33725 3.1901 5.1805 3.1901C5.02978 3.1901 4.90167 3.13885 4.79617 3.03636C4.69067 2.93387 4.63792 2.80726 4.63792 2.65654C4.63792 2.6264 4.63942 2.59927 4.64244 2.57515C4.64545 2.55104 4.64997 2.52391 4.656 2.49376C4.61983 2.50582 4.5927 2.52391 4.57461 2.54802C4.55653 2.57214 4.54146 2.60831 4.5294 2.65654L4.37567 3.55183H6.0848V4.2753H5.79543L6.26566 4.80886L6.7359 4.2753H6.44653V3.55183H8.25514V4.2753H7.69447L6.74495 5.3605L7.69447 6.44571H8.25514V7.16917H6.44653V6.44571H6.7359L6.26566 5.9031L5.79543 6.44571H6.0848V7.16917H4.27619Z" fill="#344054"/>
|
|
9022
|
+
</g>
|
|
9023
|
+
</svg>
|
|
9024
|
+
`,
|
|
9025
|
+
},
|
|
8985
9026
|
{
|
|
8986
9027
|
name: "data-orchestration",
|
|
8987
9028
|
svg: `<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
package/package.json
CHANGED
|
@@ -1,338 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
// import { Button } from "primereact/button";
|
|
5
|
-
// import avatar from "../../assets/images/avatar.png";
|
|
6
|
-
// import SvgComponent from "../../directives/svg-component";
|
|
7
|
-
// import "./avatar.scss";
|
|
8
|
-
// import { Avatar } from "primereact/avatar";
|
|
9
|
-
// import { AvatarGroup } from "primereact/avatargroup";
|
|
10
|
-
// import profileimage from "../../assets/images/profile-square-image.png";
|
|
11
|
-
// // import FormComponent from "../../components/form/form";
|
|
12
|
-
// import FormFields from "../../components/form/form-fields/form-fields";
|
|
13
|
-
// import { object, number } from "yup";
|
|
14
|
-
// import TextEditor from "../../components/froala-editor/FroalaEditor";
|
|
15
|
-
// import { useState } from "react";
|
|
16
|
-
// const AvatarComponent = () => {
|
|
17
|
-
// const [text, setText] = useState<string>("");
|
|
18
|
-
// // const initVals = {
|
|
19
|
-
// // title: 0,
|
|
20
|
-
// // }
|
|
21
|
-
// const onChangeText = (e: any) => {
|
|
22
|
-
// setText(e);
|
|
23
|
-
// debugger
|
|
24
|
-
// }
|
|
25
|
-
// // const FormVals = (props: any) => {
|
|
26
|
-
// // const { errors, touched, isValid, values, setFieldValue } = props;
|
|
27
|
-
// // const triggerSubmit = (e: any) => {
|
|
28
|
-
// // console.log(e)
|
|
29
|
-
// // debugger
|
|
30
|
-
// // console.log(values);
|
|
31
|
-
// // // submitForm()
|
|
32
|
-
// // // resetForm()
|
|
33
|
-
// // }
|
|
34
|
-
// // return (
|
|
35
|
-
// // <div className="p-5">
|
|
36
|
-
// // <Button className={`p-button-xs ${isValid && Object.keys(touched).length === Object.keys(initVals).length ? '' : 'p-disabled'}`} type="submit" label="Create" onClick={(e: any) => triggerSubmit(e)} />
|
|
37
|
-
// // <FormFields.InputNumberField min={0} name={'title'} label={'Title'} setFieldValue={setFieldValue} length={'full'} placeholder={'Enter the plan title'} touched={touched} errors={errors} />
|
|
38
|
-
// // </div>
|
|
39
|
-
// // )
|
|
40
|
-
// // }
|
|
41
|
-
// // const validtionSchema = object().shape({
|
|
42
|
-
// // title: number().min(1,'error').max(24, 'err max').test("custom","invalid",(value: any) => {
|
|
43
|
-
// // if (value === "") {
|
|
44
|
-
// // return false
|
|
45
|
-
// // } else {
|
|
46
|
-
// // return true;
|
|
47
|
-
// // }
|
|
48
|
-
// // })
|
|
49
|
-
// // })
|
|
50
|
-
// const config = {
|
|
51
|
-
// placeholder: 'Enter text',
|
|
52
|
-
// charCounterCount: true,
|
|
53
|
-
// }
|
|
54
|
-
// return (
|
|
55
|
-
// <>
|
|
56
|
-
// <h2 className="flex bg-gray-200 p-3 justify-content-center mb-4">Tags</h2>
|
|
57
|
-
// <div className="grid">
|
|
58
|
-
// {/* <FormComponent values={initVals} validations={validtionSchema}>
|
|
59
|
-
// {
|
|
60
|
-
// ({errors, touched, isValid, values, actions,resetForm, submitForm, setFieldValue}: any) => (
|
|
61
|
-
// <FormVals errors={errors} touched={touched} isValid={isValid} values={values} actions={actions} resetForm={resetForm} submitForm={submitForm} setFieldValue={setFieldValue} />
|
|
62
|
-
// )
|
|
63
|
-
// }
|
|
64
|
-
// </FormComponent> */}
|
|
65
|
-
// <TextEditor config={config} model={text} onModelChange={onChangeText} />
|
|
66
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
|
|
67
|
-
// <img
|
|
68
|
-
// src={avatar}
|
|
69
|
-
// className=" border-circle w-4rem h-4rem p-avatar-focus"
|
|
70
|
-
// />
|
|
71
|
-
// <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
|
|
72
|
-
// <img
|
|
73
|
-
// src={avatar}
|
|
74
|
-
// className=" border-circle w-4rem h-4rem p-avatar-focus"
|
|
75
|
-
// />
|
|
76
|
-
// <span
|
|
77
|
-
// className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
|
|
78
|
-
// style={{
|
|
79
|
-
// position: "absolute",
|
|
80
|
-
// right: "0",
|
|
81
|
-
// bottom: "0",
|
|
82
|
-
// }}
|
|
83
|
-
// ></span>
|
|
84
|
-
// </div>
|
|
85
|
-
// <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
|
|
86
|
-
// <img
|
|
87
|
-
// src={avatar}
|
|
88
|
-
// className=" border-circle w-4rem h-4rem p-avatar-focus"
|
|
89
|
-
// />
|
|
90
|
-
// <span
|
|
91
|
-
// className=" absolute "
|
|
92
|
-
// style={{
|
|
93
|
-
// right: "-2px",
|
|
94
|
-
// bottom: "-2px",
|
|
95
|
-
// }}
|
|
96
|
-
// >
|
|
97
|
-
// <SvgComponent icon="avatar-company-logo-2xl" />
|
|
98
|
-
// </span>
|
|
99
|
-
// </div>
|
|
100
|
-
// <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
|
|
101
|
-
// <img
|
|
102
|
-
// src={avatar}
|
|
103
|
-
// className=" border-circle w-4rem h-4rem p-avatar-focus"
|
|
104
|
-
// />
|
|
105
|
-
// <span
|
|
106
|
-
// className=" absolute "
|
|
107
|
-
// style={{
|
|
108
|
-
// right: "-2px",
|
|
109
|
-
// bottom: "-2px",
|
|
110
|
-
// }}
|
|
111
|
-
// >
|
|
112
|
-
// <SvgComponent icon="verified-tick-2xl" />
|
|
113
|
-
// </span>
|
|
114
|
-
// </div>
|
|
115
|
-
// </div>
|
|
116
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
|
|
117
|
-
// <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
|
|
118
|
-
// <SvgComponent icon="avatar-user-2xl" />
|
|
119
|
-
// </span>
|
|
120
|
-
// <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
|
|
121
|
-
// <SvgComponent icon="avatar-user-2xl" />
|
|
122
|
-
// <span
|
|
123
|
-
// className="bg-green-500 w-1rem h-1rem border-circle border-1 border-white"
|
|
124
|
-
// style={{
|
|
125
|
-
// position: "absolute",
|
|
126
|
-
// right: "0px",
|
|
127
|
-
// bottom: "0px",
|
|
128
|
-
// }}
|
|
129
|
-
// ></span>
|
|
130
|
-
// </span>
|
|
131
|
-
// <span className="w-4rem h-4rem border-circle bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium justify-content-center border-3 border-transparent hover:border-gray-200">
|
|
132
|
-
// OR
|
|
133
|
-
// </span>
|
|
134
|
-
// <span
|
|
135
|
-
// className="w-4rem h-4rem border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200"
|
|
136
|
-
// style={{ fontSize: "18px" }}
|
|
137
|
-
// >
|
|
138
|
-
// OR
|
|
139
|
-
// <span
|
|
140
|
-
// className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
|
|
141
|
-
// style={{
|
|
142
|
-
// position: "absolute",
|
|
143
|
-
// right: "0px",
|
|
144
|
-
// bottom: "0px",
|
|
145
|
-
// }}
|
|
146
|
-
// ></span>
|
|
147
|
-
// </span>
|
|
148
|
-
// <span className="w-4rem h-4rem border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200">
|
|
149
|
-
// OR
|
|
150
|
-
// <span
|
|
151
|
-
// className="absolute "
|
|
152
|
-
// style={{
|
|
153
|
-
// position: "absolute",
|
|
154
|
-
// right: "-2px",
|
|
155
|
-
// bottom: "-2px",
|
|
156
|
-
// }}
|
|
157
|
-
// >
|
|
158
|
-
// <SvgComponent icon="avatar-company-logo-xl" />
|
|
159
|
-
// </span>
|
|
160
|
-
// </span>
|
|
161
|
-
// </div>
|
|
162
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
|
|
163
|
-
// <Button
|
|
164
|
-
// rounded
|
|
165
|
-
// tooltipOptions={{ position: "top" }}
|
|
166
|
-
// tooltip="Add user"
|
|
167
|
-
// className="w-3rem h-3rem border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center"
|
|
168
|
-
// >
|
|
169
|
-
// <SvgComponent icon="avatar-button-plus" />
|
|
170
|
-
// </Button>
|
|
171
|
-
// <Button
|
|
172
|
-
// disabled
|
|
173
|
-
// rounded
|
|
174
|
-
// tooltipOptions={{ position: "top" }}
|
|
175
|
-
// tooltip="Add user"
|
|
176
|
-
// className="border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-3rem h-3rem flex align-items-center justify-content-center"
|
|
177
|
-
// >
|
|
178
|
-
// <SvgComponent icon="avatar-button-plus" />
|
|
179
|
-
// </Button>
|
|
180
|
-
// </div>
|
|
181
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8">
|
|
182
|
-
// <div className="flex align-items-center">
|
|
183
|
-
// <AvatarGroup>
|
|
184
|
-
// {/* you can define the size of the avatar using size property with "noraml, large, xlarge" values */}
|
|
185
|
-
// <Avatar image={avatar} shape="circle" size="large" />
|
|
186
|
-
// <Avatar image={avatar} shape="circle" size="large" />
|
|
187
|
-
// <Avatar image={avatar} shape="circle" size="large" />
|
|
188
|
-
// <Avatar image={avatar} shape="circle" size="large" />
|
|
189
|
-
// <Avatar image={avatar} shape="circle" size="large" />
|
|
190
|
-
// <Avatar
|
|
191
|
-
// label="+2"
|
|
192
|
-
// shape="circle"
|
|
193
|
-
// size="large"
|
|
194
|
-
// className="bg-gray-100 text-gray-600 text-base font-medium"
|
|
195
|
-
// />
|
|
196
|
-
// </AvatarGroup>
|
|
197
|
-
// <Button
|
|
198
|
-
// rounded
|
|
199
|
-
// tooltipOptions={{ position: "top" }}
|
|
200
|
-
// tooltip="Add user"
|
|
201
|
-
// className="border-gray-300 p-0 border-1 ml-1 bg-white avatar-button p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center"
|
|
202
|
-
// >
|
|
203
|
-
// <SvgComponent icon="avatar-button-plus" />
|
|
204
|
-
// </Button>
|
|
205
|
-
// </div>
|
|
206
|
-
// </div>
|
|
207
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
|
|
208
|
-
// <div className="flex align-items-center gap-3">
|
|
209
|
-
// <img
|
|
210
|
-
// src={avatar}
|
|
211
|
-
// className=" border-circle w-2rem h-2rem p-avatar-focus"
|
|
212
|
-
// />
|
|
213
|
-
// <div className="flex flex-column">
|
|
214
|
-
// <span className="text-base font-semibold line-height-2">
|
|
215
|
-
// Olivia Rhye
|
|
216
|
-
// </span>
|
|
217
|
-
// <span className="text-sm font-normal line-height-2">
|
|
218
|
-
// olivia@untitledui.com
|
|
219
|
-
// </span>
|
|
220
|
-
// </div>
|
|
221
|
-
// </div>
|
|
222
|
-
// <div className="flex align-items-center gap-3">
|
|
223
|
-
// <div className="w-2rem h-2rem border-circle flex align-items-center justify-content-center relative ">
|
|
224
|
-
// <img
|
|
225
|
-
// src={avatar}
|
|
226
|
-
// className=" border-circle w-2rem h-2rem p-avatar-focus"
|
|
227
|
-
// />
|
|
228
|
-
// <span
|
|
229
|
-
// className="bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white"
|
|
230
|
-
// style={{
|
|
231
|
-
// position: "absolute",
|
|
232
|
-
// right: "0",
|
|
233
|
-
// bottom: "0",
|
|
234
|
-
// }}
|
|
235
|
-
// ></span>
|
|
236
|
-
// </div>
|
|
237
|
-
// <div className="flex flex-column">
|
|
238
|
-
// <span className="text-base font-semibold line-height-2">
|
|
239
|
-
// Olivia Rhye
|
|
240
|
-
// </span>
|
|
241
|
-
// <span className="text-sm font-normal line-height-2">
|
|
242
|
-
// olivia@untitledui.com
|
|
243
|
-
// </span>
|
|
244
|
-
// </div>
|
|
245
|
-
// </div>
|
|
246
|
-
// <div className="flex align-items-center gap-3">
|
|
247
|
-
// <div className="w-3rem h-3rem border-circle flex align-items-center justify-content-center relative ">
|
|
248
|
-
// <img
|
|
249
|
-
// src={avatar}
|
|
250
|
-
// className=" border-circle w-3rem h-3rem p-avatar-focus"
|
|
251
|
-
// />
|
|
252
|
-
// <span
|
|
253
|
-
// className=" absolute "
|
|
254
|
-
// style={{
|
|
255
|
-
// right: "-2px",
|
|
256
|
-
// bottom: "-2px",
|
|
257
|
-
// }}
|
|
258
|
-
// >
|
|
259
|
-
// <SvgComponent icon="avatar-company-logo-lg" />
|
|
260
|
-
// </span>
|
|
261
|
-
// </div>
|
|
262
|
-
// <div className="flex flex-column">
|
|
263
|
-
// <span className="text-lg font-semibold line-height-3">
|
|
264
|
-
// Olivia Rhye
|
|
265
|
-
// </span>
|
|
266
|
-
// <span className="text-lg font-normal line-height-3">
|
|
267
|
-
// olivia@untitledui.com
|
|
268
|
-
// </span>
|
|
269
|
-
// </div>
|
|
270
|
-
// </div>
|
|
271
|
-
// <div className="flex align-items-center gap-3">
|
|
272
|
-
// <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
|
|
273
|
-
// <img
|
|
274
|
-
// src={avatar}
|
|
275
|
-
// className=" border-circle w-4rem h-4rem p-avatar-focus"
|
|
276
|
-
// />
|
|
277
|
-
// <span
|
|
278
|
-
// className=" absolute "
|
|
279
|
-
// style={{
|
|
280
|
-
// right: "-2px",
|
|
281
|
-
// bottom: "-2px",
|
|
282
|
-
// }}
|
|
283
|
-
// >
|
|
284
|
-
// <SvgComponent icon="verified-tick-xl" />
|
|
285
|
-
// </span>
|
|
286
|
-
// </div>
|
|
287
|
-
// <div className="flex flex-column">
|
|
288
|
-
// <span className="text-lg font-semibold line-height-3">
|
|
289
|
-
// Olivia Rhye
|
|
290
|
-
// </span>
|
|
291
|
-
// <span className="text-lg font-normal line-height-3">
|
|
292
|
-
// olivia@untitledui.com
|
|
293
|
-
// </span>
|
|
294
|
-
// </div>
|
|
295
|
-
// </div>
|
|
296
|
-
// </div>
|
|
297
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
|
|
298
|
-
// <div className="w-6rem h-6rem border-circle flex align-items-center justify-content-center relative ">
|
|
299
|
-
// <img
|
|
300
|
-
// src={avatar}
|
|
301
|
-
// className=" border-circle border-3 border-white w-6rem h-6rem shadow-4"
|
|
302
|
-
// />
|
|
303
|
-
// <span
|
|
304
|
-
// className=" absolute "
|
|
305
|
-
// style={{
|
|
306
|
-
// right: "2px",
|
|
307
|
-
// bottom: "2px",
|
|
308
|
-
// }}
|
|
309
|
-
// >
|
|
310
|
-
// <SvgComponent icon="verified-tick-3xl" />
|
|
311
|
-
// </span>
|
|
312
|
-
// </div>
|
|
313
|
-
// </div>
|
|
314
|
-
// <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
|
|
315
|
-
// <div className="w-10rem flex flex-column align-items-start">
|
|
316
|
-
// <img src={profileimage} alt="profile" className="h-10rem " />
|
|
317
|
-
// <span className="text-lg text-gray-900 line-height-3 pt-2">
|
|
318
|
-
// Olivia Rhye
|
|
319
|
-
// </span>
|
|
320
|
-
// <span className="flex align-items-center gap-2 line-height-3 ">
|
|
321
|
-
// <a href="www.google.com">
|
|
322
|
-
// <SvgComponent icon="link-01" />
|
|
323
|
-
// </a>
|
|
324
|
-
// <a href="www.google.com" className="text-gray-500 font-normal">
|
|
325
|
-
// Source
|
|
326
|
-
// </a>
|
|
327
|
-
// </span>
|
|
328
|
-
// </div>
|
|
329
|
-
// </div>
|
|
330
|
-
// </div>
|
|
331
|
-
// </>
|
|
332
|
-
// );
|
|
333
|
-
// };
|
|
334
|
-
// export default AvatarComponent;
|
|
335
|
-
const avatar = () => {
|
|
336
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
|
|
337
|
-
};
|
|
338
|
-
exports.default = avatar;
|
|
@@ -1,73 +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 badge_1 = require("primereact/badge");
|
|
6
|
-
require("./badge.scss");
|
|
7
|
-
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
8
|
-
const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
|
|
9
|
-
const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
|
|
10
|
-
const dropdown_1 = require("primereact/dropdown");
|
|
11
|
-
const react_1 = require("react");
|
|
12
|
-
const button_1 = require("primereact/button");
|
|
13
|
-
const BadgeComponent = () => {
|
|
14
|
-
// dropdown badge state
|
|
15
|
-
const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
|
|
16
|
-
name: "Error",
|
|
17
|
-
code: "bg-red-500",
|
|
18
|
-
text_code: "text-red-700",
|
|
19
|
-
bg: "bg-red-50",
|
|
20
|
-
});
|
|
21
|
-
//dropdown badge options list
|
|
22
|
-
const labels = [
|
|
23
|
-
{
|
|
24
|
-
name: "Error",
|
|
25
|
-
code: "bg-red-500",
|
|
26
|
-
text_code: "text-red-700",
|
|
27
|
-
bg: "bg-red-50",
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
name: "Pending",
|
|
31
|
-
code: "bg-primary-500",
|
|
32
|
-
text_code: "text-primary-700",
|
|
33
|
-
bg: "bg-primary-50",
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
name: "Success",
|
|
37
|
-
code: "bg-green-500",
|
|
38
|
-
text_code: "text-green-700",
|
|
39
|
-
bg: "bg-green-50",
|
|
40
|
-
},
|
|
41
|
-
];
|
|
42
|
-
// badge dropdown selected lablel templete
|
|
43
|
-
const selectedlabelTemplate = (option) => {
|
|
44
|
-
if (option) {
|
|
45
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
|
|
46
|
-
}
|
|
47
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${selectedLabel.text_code}` }, { children: selectedLabel.name }))] })));
|
|
48
|
-
};
|
|
49
|
-
// badge dropdown option lablel templete
|
|
50
|
-
const labelOptionTemplate = (option) => {
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
|
|
52
|
-
};
|
|
53
|
-
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: "Badges" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-8 h-full w-full flex flex-column" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-a", className: "bg-green-50 border-round-2xl font-medium flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: ["Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
54
|
-
const el = document.getElementById("badge-1-a");
|
|
55
|
-
el.remove();
|
|
56
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-b", className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
57
|
-
const el = document.getElementById("badge-1-b");
|
|
58
|
-
el.remove();
|
|
59
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-c", className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
60
|
-
const el = document.getElementById("badge-1-c");
|
|
61
|
-
el.remove();
|
|
62
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-a", className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
63
|
-
const el = document.getElementById("badge-2-a");
|
|
64
|
-
el.remove();
|
|
65
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-b", className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
66
|
-
const el = document.getElementById("badge-2-b");
|
|
67
|
-
el.remove();
|
|
68
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-c", className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
|
|
69
|
-
const el = document.getElementById("badge-2-c");
|
|
70
|
-
el.remove();
|
|
71
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-100 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-100 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-red-600" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 " }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto" }, { children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) }))] })) }))] }));
|
|
72
|
-
};
|
|
73
|
-
exports.default = BadgeComponent;
|
|
@@ -1,14 +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 breadcrumb_1 = require("primereact/breadcrumb");
|
|
6
|
-
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
|
-
const BreadCrumbComponent = () => {
|
|
8
|
-
///menu of breadcrumbs +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
9
|
-
const items = [{ label: 'Setting', className: "text-gray-600 px-3 py-2" }, { label: 'Project', className: "px-3 py-2" }, { label: "Team", className: "px-3 py-2 last-element" }];
|
|
10
|
-
// home icon of breadcrumbs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
11
|
-
const home = { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "home-line-gray-500" }), url: "", className: "pr-4" };
|
|
12
|
-
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: "BreadCrumbs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'border-1 border-x-none border-gray-200', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'border-1 border-x-none border-gray-200', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'bg-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'bg-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) }))] }))] }));
|
|
13
|
-
};
|
|
14
|
-
exports.default = BreadCrumbComponent;
|