@crowdfarming/oliva-ds 1.26.0 → 1.27.0-rc.1
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/fesm2022/crowdfarming-oliva-ds.mjs +234 -82
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/chips/src/lib/chips/chips.component.d.ts +2 -1
- package/lib/dropdown-select/src/lib/dropdown-select/dropdown-select.component.d.ts +8 -17
- package/lib/icon/src/lib/icon/svg/brands.constant.d.ts +2 -0
- package/lib/icon/src/lib/icon/svg/index.d.ts +8 -0
- package/lib/icon/src/lib/icon/svg/mathFinances.constant.d.ts +1 -0
- package/lib/icon/src/lib/icon/svg/officeEditing.constant.d.ts +2 -0
- package/lib/icon/src/lib/icon/svg/systemDevices.constant.d.ts +1 -0
- package/lib/icon/src/lib/icon/svg/weatherNature.constant.d.ts +2 -0
- package/lib/overlay/src/index.d.ts +2 -0
- package/lib/overlay/src/lib/overlay/overlay-trigger.directive.d.ts +9 -0
- package/lib/overlay/src/lib/overlay/overlay.component.d.ts +35 -0
- package/package.json +1 -1
|
@@ -1695,6 +1695,14 @@ const weatherNatureIcons = {
|
|
|
1695
1695
|
'drop-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1696
1696
|
<path d="M21.75 5.96874C20.206 4.18554 18.4682 2.57981 16.5688 1.18124C16.4006 1.06346 16.2003 1.00027 15.995 1.00027C15.7897 1.00027 15.5894 1.06346 15.4213 1.18124C13.5253 2.58039 11.7909 4.1861 10.25 5.96874C6.81375 9.91499 5 14.075 5 18C5 20.9174 6.15893 23.7153 8.22183 25.7782C10.2847 27.8411 13.0826 29 16 29C18.9174 29 21.7153 27.8411 23.7782 25.7782C25.8411 23.7153 27 20.9174 27 18C27 14.075 25.1863 9.91499 21.75 5.96874ZM16 27C13.6139 26.9973 11.3262 26.0483 9.63896 24.361C7.95171 22.6738 7.00265 20.3861 7 18C7 10.8462 13.9338 4.87499 16 3.24999C18.0662 4.87499 25 10.8437 25 18C24.9974 20.3861 24.0483 22.6738 22.361 24.361C20.6738 26.0483 18.3861 26.9973 16 27ZM22.9862 19.1675C22.7269 20.6159 22.0301 21.95 20.9896 22.9904C19.949 24.0307 18.6147 24.7273 17.1663 24.9862C17.1113 24.9951 17.0557 24.9996 17 25C16.7492 24.9999 16.5075 24.9056 16.323 24.7357C16.1384 24.5658 16.0245 24.3328 16.0037 24.0828C15.9829 23.8328 16.0569 23.5841 16.2108 23.3861C16.3648 23.1881 16.5876 23.0552 16.835 23.0137C18.9062 22.665 20.6637 20.9075 21.015 18.8325C21.0594 18.5709 21.2059 18.3377 21.4223 18.1842C21.6387 18.0306 21.9072 17.9693 22.1688 18.0137C22.4303 18.0582 22.6635 18.2047 22.8171 18.4211C22.9706 18.6374 23.0319 18.9059 22.9875 19.1675H22.9862Z" fill="#070707"/>
|
|
1697
1697
|
</svg>
|
|
1698
|
+
`,
|
|
1699
|
+
'sparkle-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1700
|
+
<path d="M24.6975 16.1325L18.25 13.75L15.875 7.2975C15.7343 6.91541 15.4799 6.58566 15.1459 6.35273C14.812 6.11981 14.4146 5.99492 14.0075 5.99492C13.6003 5.99492 13.203 6.11981 12.869 6.35273C12.5351 6.58566 12.2806 6.91541 12.14 7.2975L9.74999 13.75L3.29749 16.125C2.9154 16.2656 2.58564 16.5201 2.35272 16.854C2.11979 17.188 1.9949 17.5853 1.9949 17.9925C1.9949 18.3997 2.11979 18.797 2.35272 19.131C2.58564 19.4649 2.9154 19.7194 3.29749 19.86L9.74999 22.25L12.125 28.7025C12.2656 29.0846 12.5201 29.4143 12.854 29.6473C13.188 29.8802 13.5853 30.0051 13.9925 30.0051C14.3996 30.0051 14.797 29.8802 15.1309 29.6473C15.4649 29.4143 15.7193 29.0846 15.86 28.7025L18.25 22.25L24.7025 19.875C25.0846 19.7344 25.4143 19.4799 25.6473 19.146C25.8802 18.812 26.0051 18.4147 26.0051 18.0075C26.0051 17.6003 25.8802 17.203 25.6473 16.869C25.4143 16.5351 25.0846 16.2806 24.7025 16.14L24.6975 16.1325ZM17.125 20.5275C16.9892 20.5775 16.866 20.6564 16.7637 20.7587C16.6614 20.861 16.5825 20.9843 16.5325 21.12L14 27.9813L11.4725 21.125C11.4225 20.9878 11.3432 20.8633 11.2399 20.76C11.1367 20.6568 11.0122 20.5774 10.875 20.5275L4.01874 18L10.875 15.4725C11.0122 15.4226 11.1367 15.3432 11.2399 15.24C11.3432 15.1367 11.4225 15.0122 11.4725 14.875L14 8.01875L16.5275 14.875C16.5775 15.0107 16.6564 15.134 16.7587 15.2363C16.861 15.3386 16.9842 15.4175 17.12 15.4675L23.9812 18L17.125 20.5275ZM18 5C18 4.73478 18.1053 4.48043 18.2929 4.29289C18.4804 4.10536 18.7348 4 19 4H21V2C21 1.73478 21.1053 1.48043 21.2929 1.29289C21.4804 1.10536 21.7348 1 22 1C22.2652 1 22.5196 1.10536 22.7071 1.29289C22.8946 1.48043 23 1.73478 23 2V4H25C25.2652 4 25.5196 4.10536 25.7071 4.29289C25.8946 4.48043 26 4.73478 26 5C26 5.26522 25.8946 5.51957 25.7071 5.70711C25.5196 5.89464 25.2652 6 25 6H23V8C23 8.26522 22.8946 8.51957 22.7071 8.70711C22.5196 8.89464 22.2652 9 22 9C21.7348 9 21.4804 8.89464 21.2929 8.70711C21.1053 8.51957 21 8.26522 21 8V6H19C18.7348 6 18.4804 5.89464 18.2929 5.70711C18.1053 5.51957 18 5.26522 18 5ZM31 11C31 11.2652 30.8946 11.5196 30.7071 11.7071C30.5196 11.8946 30.2652 12 30 12H29V13C29 13.2652 28.8946 13.5196 28.7071 13.7071C28.5196 13.8946 28.2652 14 28 14C27.7348 14 27.4804 13.8946 27.2929 13.7071C27.1053 13.5196 27 13.2652 27 13V12H26C25.7348 12 25.4804 11.8946 25.2929 11.7071C25.1053 11.5196 25 11.2652 25 11C25 10.7348 25.1053 10.4804 25.2929 10.2929C25.4804 10.1054 25.7348 10 26 10H27V9C27 8.73478 27.1053 8.48043 27.2929 8.29289C27.4804 8.10536 27.7348 8 28 8C28.2652 8 28.5196 8.10536 28.7071 8.29289C28.8946 8.48043 29 8.73478 29 9V10H30C30.2652 10 30.5196 10.1054 30.7071 10.2929C30.8946 10.4804 31 10.7348 31 11Z" fill="#070707"/>
|
|
1701
|
+
</svg>
|
|
1702
|
+
`,
|
|
1703
|
+
'sparkle-fill': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1704
|
+
<path d="M26 18C26.0025 18.4077 25.8786 18.8062 25.6454 19.1407C25.4121 19.4751 25.081 19.729 24.6975 19.8675L18.25 22.25L15.875 28.7025C15.7343 29.0846 15.4799 29.4143 15.1459 29.6473C14.812 29.8802 14.4146 30.0051 14.0075 30.0051C13.6003 30.0051 13.203 29.8802 12.869 29.6473C12.5351 29.4143 12.2806 29.0846 12.14 28.7025L9.74999 22.25L3.29749 19.875C2.9154 19.7344 2.58564 19.4799 2.35272 19.146C2.11979 18.812 1.9949 18.4147 1.9949 18.0075C1.9949 17.6003 2.11979 17.203 2.35272 16.869C2.58564 16.5351 2.9154 16.2806 3.29749 16.14L9.74999 13.75L12.125 7.2975C12.2656 6.91541 12.5201 6.58566 12.854 6.35273C13.188 6.11981 13.5853 5.99492 13.9925 5.99492C14.3996 5.99492 14.797 6.11981 15.1309 6.35273C15.4649 6.58566 15.7193 6.91541 15.86 7.2975L18.25 13.75L24.7025 16.125C25.0863 16.2647 25.4172 16.5202 25.6496 16.856C25.882 17.1919 26.0044 17.5916 26 18ZM19 6H21V8C21 8.26522 21.1053 8.51957 21.2929 8.70711C21.4804 8.89464 21.7348 9 22 9C22.2652 9 22.5196 8.89464 22.7071 8.70711C22.8946 8.51957 23 8.26522 23 8V6H25C25.2652 6 25.5196 5.89464 25.7071 5.70711C25.8946 5.51957 26 5.26522 26 5C26 4.73478 25.8946 4.48043 25.7071 4.29289C25.5196 4.10536 25.2652 4 25 4H23V2C23 1.73478 22.8946 1.48043 22.7071 1.29289C22.5196 1.10536 22.2652 1 22 1C21.7348 1 21.4804 1.10536 21.2929 1.29289C21.1053 1.48043 21 1.73478 21 2V4H19C18.7348 4 18.4804 4.10536 18.2929 4.29289C18.1053 4.48043 18 4.73478 18 5C18 5.26522 18.1053 5.51957 18.2929 5.70711C18.4804 5.89464 18.7348 6 19 6ZM30 10H29V9C29 8.73478 28.8946 8.48043 28.7071 8.29289C28.5196 8.10536 28.2652 8 28 8C27.7348 8 27.4804 8.10536 27.2929 8.29289C27.1053 8.48043 27 8.73478 27 9V10H26C25.7348 10 25.4804 10.1054 25.2929 10.2929C25.1053 10.4804 25 10.7348 25 11C25 11.2652 25.1053 11.5196 25.2929 11.7071C25.4804 11.8946 25.7348 12 26 12H27V13C27 13.2652 27.1053 13.5196 27.2929 13.7071C27.4804 13.8946 27.7348 14 28 14C28.2652 14 28.5196 13.8946 28.7071 13.7071C28.8946 13.5196 29 13.2652 29 13V12H30C30.2652 12 30.5196 11.8946 30.7071 11.7071C30.8946 11.5196 31 11.2652 31 11C31 10.7348 30.8946 10.4804 30.7071 10.2929C30.5196 10.1054 30.2652 10 30 10Z" fill="#070707"/>
|
|
1705
|
+
</svg>
|
|
1698
1706
|
`
|
|
1699
1707
|
};
|
|
1700
1708
|
|
|
@@ -1869,6 +1877,14 @@ const brandsIcons = {
|
|
|
1869
1877
|
'youtubelogo-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1870
1878
|
<path d="M20.555 15.1675L14.555 11.1675C14.4044 11.067 14.2293 11.0093 14.0484 11.0005C13.8675 10.9918 13.6877 11.0323 13.528 11.1177C13.3684 11.2032 13.2349 11.3304 13.1419 11.4858C13.0489 11.6412 12.9999 11.8189 13 12V20C12.9999 20.1811 13.0489 20.3588 13.1419 20.5142C13.2349 20.6696 13.3684 20.7968 13.528 20.8823C13.6877 20.9677 13.8675 21.0082 14.0484 20.9995C14.2293 20.9907 14.4044 20.933 14.555 20.8325L20.555 16.8325C20.6922 16.7412 20.8047 16.6175 20.8825 16.4722C20.9603 16.327 21.001 16.1648 21.001 16C21.001 15.8352 20.9603 15.673 20.8825 15.5278C20.8047 15.3826 20.6922 15.2588 20.555 15.1675ZM15 18.1313V13.875L18.1975 16L15 18.1313ZM29.2913 8.69C29.1735 8.22919 28.9478 7.80298 28.6329 7.44654C28.318 7.09011 27.9228 6.81366 27.48 6.64C23.195 4.985 16.375 5 16 5C15.625 5 8.805 4.985 4.52 6.64C4.0772 6.81366 3.68204 7.09011 3.36712 7.44654C3.05219 7.80298 2.82653 8.22919 2.70875 8.69C2.385 9.9375 2 12.2175 2 16C2 19.7825 2.385 22.0625 2.70875 23.31C2.82636 23.771 3.05194 24.1975 3.36687 24.5542C3.68181 24.9108 4.07706 25.1875 4.52 25.3613C8.625 26.945 15.05 27 15.9175 27H16.0825C16.95 27 23.3787 26.945 27.48 25.3613C27.9229 25.1875 28.3182 24.9108 28.6331 24.5542C28.9481 24.1975 29.1736 23.771 29.2913 23.31C29.615 22.06 30 19.7825 30 16C30 12.2175 29.615 9.9375 29.2913 8.69ZM27.355 22.815C27.3169 22.9684 27.243 23.1105 27.1394 23.2298C27.0357 23.3491 26.9053 23.4421 26.7588 23.5013C22.8025 25.0288 16.0738 25.0013 16.0088 25.0013H16C15.9325 25.0013 9.20875 25.0263 5.25 23.5013C5.10346 23.4421 4.97303 23.3491 4.86938 23.2298C4.76574 23.1105 4.69184 22.9684 4.65375 22.815C4.35 21.6738 4 19.5713 4 16C4 12.4288 4.35 10.3263 4.645 9.19125C4.68239 9.03698 4.75596 8.89382 4.85965 8.77362C4.96333 8.65342 5.09413 8.55963 5.24125 8.5C9.05625 7.02625 15.4487 7 15.9725 7H16.0063C16.0738 7 22.8038 6.9775 26.7563 8.5C26.9028 8.55915 27.0332 8.65217 27.1369 8.77146C27.2405 8.89074 27.3144 9.03289 27.3525 9.18625C27.65 10.3263 28 12.4288 28 16C28 19.5713 27.65 21.6738 27.355 22.8088V22.815Z" fill="#070707"/>
|
|
1871
1879
|
</svg>
|
|
1880
|
+
`,
|
|
1881
|
+
'whatsapplogo-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1882
|
+
<path d="M23.4475 18.105L19.4475 16.105C19.2901 16.0265 19.1147 15.991 18.9391 16.002C18.7636 16.0129 18.594 16.07 18.4475 16.1675L16.6113 17.3925C15.7683 16.9291 15.0747 16.2354 14.6113 15.3925L15.8363 13.5562C15.9337 13.4098 15.9908 13.2402 16.0018 13.0646C16.0128 12.8891 15.9772 12.7137 15.8988 12.5562L13.8988 8.55625C13.8159 8.38884 13.6877 8.248 13.5289 8.14968C13.3701 8.05137 13.1868 7.99952 13 8C11.6739 8 10.4022 8.52678 9.4645 9.46447C8.52681 10.4021 8.00003 11.6739 8.00003 13C8.00334 15.9164 9.16333 18.7123 11.2255 20.7745C13.2877 22.8367 16.0837 23.9967 19 24C19.6566 24 20.3068 23.8707 20.9134 23.6194C21.5201 23.3681 22.0713 22.9998 22.5356 22.5355C22.9999 22.0712 23.3682 21.52 23.6194 20.9134C23.8707 20.3068 24 19.6566 24 19C24.0002 18.8142 23.9485 18.6321 23.851 18.474C23.7534 18.3159 23.6137 18.1881 23.4475 18.105ZM19 22C16.6139 21.9974 14.3262 21.0483 12.639 19.361C10.9517 17.6738 10.0027 15.3861 10 13C9.99984 12.3064 10.24 11.6342 10.6796 11.0977C11.1192 10.5612 11.7312 10.1936 12.4113 10.0575L13.8463 12.9325L12.625 14.75C12.5338 14.8869 12.4777 15.0442 12.4618 15.2079C12.4459 15.3717 12.4706 15.5368 12.5338 15.6888C13.2493 17.3892 14.602 18.742 16.3025 19.4575C16.4549 19.5235 16.6213 19.5505 16.7867 19.5361C16.9521 19.5217 17.1114 19.4663 17.25 19.375L19.0763 18.1575L21.9513 19.5925C21.8141 20.2734 21.4449 20.8856 20.9067 21.3247C20.3685 21.7637 19.6946 22.0024 19 22ZM16 3C13.7556 2.99951 11.5493 3.58011 9.59585 4.68529C7.64239 5.79046 6.00834 7.38256 4.85274 9.30662C3.69715 11.2307 3.05938 13.4212 3.00151 15.6648C2.94365 17.9085 3.46765 20.1289 4.52253 22.11L3.10378 26.3662C2.98626 26.7186 2.96921 27.0968 3.05453 27.4583C3.13985 27.8199 3.32417 28.1505 3.58684 28.4132C3.84951 28.6759 4.18015 28.8602 4.54169 28.9455C4.90323 29.0308 5.28139 29.0138 5.63378 28.8962L9.89003 27.4775C11.6335 28.4048 13.5653 28.9228 15.5388 28.992C17.5123 29.0613 19.4757 28.68 21.2799 27.8772C23.084 27.0743 24.6816 25.871 25.9513 24.3586C27.221 22.8462 28.1294 21.0644 28.6077 19.1484C29.0859 17.2325 29.1214 15.2328 28.7114 13.301C28.3015 11.3693 27.4568 9.55642 26.2416 7.9999C25.0263 6.44337 23.4725 5.18415 21.6979 4.31782C19.9234 3.45149 17.9748 3.00081 16 3ZM16 27C14.0663 27.0013 12.1664 26.4921 10.4925 25.5238C10.37 25.4527 10.2337 25.4085 10.0928 25.394C9.95185 25.3796 9.80945 25.3953 9.67503 25.44L5.00003 27L6.55878 22.325C6.60371 22.1907 6.61959 22.0483 6.60537 21.9074C6.59115 21.7665 6.54715 21.6301 6.47628 21.5075C5.26374 19.4111 4.77692 16.9732 5.09132 14.572C5.40572 12.1707 6.50377 9.94027 8.21514 8.22674C9.92651 6.51321 12.1555 5.41234 14.5564 5.0949C16.9573 4.77747 19.3958 5.26122 21.4937 6.47111C23.5916 7.68099 25.2316 9.54939 26.1592 11.7864C27.0869 14.0235 27.2504 16.5042 26.6243 18.8436C25.9983 21.1831 24.6177 23.2505 22.6967 24.7253C20.7757 26.2 18.4218 26.9996 16 27Z" fill="#070707"/>
|
|
1883
|
+
</svg>
|
|
1884
|
+
`,
|
|
1885
|
+
'googlelogo-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1886
|
+
<path d="M28 16C28.0001 18.8255 27.0032 21.5605 25.1849 23.7232C23.3665 25.8859 20.8433 27.3376 18.0597 27.8225C15.2761 28.3075 12.4106 27.7947 9.96801 26.3744C7.52539 24.9541 5.66229 22.7174 4.70686 20.0583C3.75142 17.3992 3.76495 14.4883 4.74505 11.8382C5.72516 9.18805 7.60897 6.96879 10.0647 5.57125C12.5204 4.17371 15.3905 3.68754 18.1695 4.19837C20.9485 4.70921 23.4581 6.18427 25.2563 8.36376C25.3455 8.46421 25.4136 8.58162 25.4565 8.70898C25.4994 8.83634 25.5162 8.97103 25.5058 9.10502C25.4955 9.239 25.4582 9.36953 25.3963 9.4888C25.3344 9.60807 25.2491 9.71364 25.1455 9.7992C25.0418 9.88475 24.922 9.94855 24.7932 9.98677C24.6643 10.025 24.5291 10.0368 24.3956 10.0216C24.2621 10.0064 24.133 9.96446 24.0161 9.89825C23.8991 9.83204 23.7967 9.74293 23.715 9.63626C22.2442 7.85291 20.201 6.63418 17.933 6.1874C15.665 5.74062 13.3122 6.09339 11.275 7.1857C9.23769 8.278 7.64178 10.0424 6.7587 12.1787C5.87562 14.3149 5.75992 16.6912 6.43128 18.9032C7.10265 21.1151 8.51961 23.0262 10.4411 24.3113C12.3626 25.5963 14.67 26.176 16.9707 25.9516C19.2714 25.7273 21.4233 24.7129 23.0604 23.0808C24.6975 21.4488 25.7186 19.3 25.95 17H16C15.7348 17 15.4804 16.8947 15.2929 16.7071C15.1054 16.5196 15 16.2652 15 16C15 15.7348 15.1054 15.4804 15.2929 15.2929C15.4804 15.1054 15.7348 15 16 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16Z" fill="#070707"/>
|
|
1887
|
+
</svg>
|
|
1872
1888
|
`
|
|
1873
1889
|
};
|
|
1874
1890
|
|
|
@@ -1924,6 +1940,10 @@ const systemDevicesIcons = {
|
|
|
1924
1940
|
'lightbulb-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1925
1941
|
<path d="M22 29C22 29.2652 21.8947 29.5196 21.7071 29.7071C21.5196 29.8947 21.2653 30 21 30H11C10.7348 30 10.4805 29.8947 10.2929 29.7071C10.1054 29.5196 10 29.2652 10 29C10 28.7348 10.1054 28.4804 10.2929 28.2929C10.4805 28.1054 10.7348 28 11 28H21C21.2653 28 21.5196 28.1054 21.7071 28.2929C21.8947 28.4804 22 28.7348 22 29ZM27 13C27.0044 14.6671 26.6278 16.3131 25.899 17.8124C25.1702 19.3117 24.1086 20.6248 22.795 21.6513C22.5494 21.8395 22.3501 22.0815 22.2123 22.3585C22.0745 22.6356 22.0019 22.9406 22 23.25V24C22 24.5305 21.7893 25.0392 21.4143 25.4142C21.0392 25.7893 20.5305 26 20 26H12C11.4696 26 10.9609 25.7893 10.5858 25.4142C10.2108 25.0392 10 24.5305 10 24V23.25C9.99984 22.9443 9.92953 22.6426 9.79453 22.3683C9.65953 22.094 9.46342 21.8542 9.22129 21.6675C7.91104 20.6471 6.8501 19.3419 6.11876 17.8509C5.38743 16.3599 5.00487 14.722 5.00004 13.0613C4.96754 7.10377 9.78254 2.14252 15.735 2.00002C17.2017 1.96467 18.6607 2.22309 20.026 2.76004C21.3913 3.297 22.6354 4.10165 23.6851 5.12663C24.7348 6.15162 25.5688 7.37623 26.1381 8.72838C26.7074 10.0805 27.0005 11.5329 27 13ZM25 13C25.0004 11.7996 24.7606 10.6112 24.2948 9.50488C23.8289 8.39853 23.1465 7.39654 22.2876 6.55791C21.4287 5.71927 20.4107 5.06094 19.2935 4.62165C18.1764 4.18237 16.9826 3.97101 15.7825 4.00002C10.9075 4.11502 6.97379 8.17377 7.00004 13.0488C7.00461 14.407 7.31804 15.7464 7.91661 16.9656C8.51518 18.1849 9.38322 19.252 10.455 20.0863C10.9368 20.4608 11.3266 20.9406 11.5944 21.489C11.8621 22.0374 12.0009 22.6398 12 23.25V24H20V23.25C20.0014 22.638 20.1426 22.0344 20.4127 21.4853C20.6829 20.9361 21.0748 20.4559 21.5588 20.0813C22.6339 19.2411 23.5028 18.1663 24.0992 16.9391C24.6957 15.7118 25.0038 14.3645 25 13ZM22.9863 11.8325C22.727 10.3841 22.0302 9.04997 20.9896 8.00964C19.949 6.96931 18.6147 6.27276 17.1663 6.01377C17.0368 5.99194 16.9042 5.99583 16.7762 6.02522C16.6482 6.05462 16.5272 6.10893 16.4202 6.18508C16.3132 6.26122 16.2222 6.3577 16.1525 6.469C16.0828 6.58031 16.0356 6.70425 16.0138 6.83377C15.992 6.96328 15.9959 7.09583 16.0252 7.22385C16.0546 7.35186 16.109 7.47283 16.1851 7.57985C16.2612 7.68687 16.3577 7.77784 16.469 7.84757C16.5803 7.91731 16.7043 7.96444 16.8338 7.98627C18.905 8.33502 20.6625 10.0925 21.0138 12.1675C21.0534 12.4004 21.1741 12.6118 21.3546 12.7642C21.5352 12.9166 21.7638 13.0001 22 13C22.0566 12.9997 22.113 12.9951 22.1688 12.9863C22.4302 12.9416 22.6631 12.795 22.8164 12.5787C22.9697 12.3623 23.0308 12.0939 22.9863 11.8325Z" fill="#070707"/>
|
|
1926
1942
|
</svg>
|
|
1943
|
+
`,
|
|
1944
|
+
'downloadsimple-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1945
|
+
<path d="M28 18V26C28 26.2652 27.8946 26.5196 27.7071 26.7071C27.5196 26.8946 27.2652 27 27 27H5C4.73478 27 4.48043 26.8946 4.29289 26.7071C4.10536 26.5196 4 26.2652 4 26V18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17C5.26522 17 5.51957 17.1054 5.70711 17.2929C5.89464 17.4804 6 17.7348 6 18V25H26V18C26 17.7348 26.1054 17.4804 26.2929 17.2929C26.4804 17.1054 26.7348 17 27 17C27.2652 17 27.5196 17.1054 27.7071 17.2929C27.8946 17.4804 28 17.7348 28 18ZM15.2925 18.7075C15.3854 18.8005 15.4957 18.8742 15.6171 18.9246C15.7385 18.9749 15.8686 19.0008 16 19.0008C16.1314 19.0008 16.2615 18.9749 16.3829 18.9246C16.5043 18.8742 16.6146 18.8005 16.7075 18.7075L21.7075 13.7075C21.8004 13.6146 21.8741 13.5043 21.9244 13.3829C21.9747 13.2615 22.0006 13.1314 22.0006 13C22.0006 12.8686 21.9747 12.7385 21.9244 12.6171C21.8741 12.4957 21.8004 12.3854 21.7075 12.2925C21.6146 12.1996 21.5043 12.1259 21.3829 12.0756C21.2615 12.0253 21.1314 11.9994 21 11.9994C20.8686 11.9994 20.7385 12.0253 20.6171 12.0756C20.4957 12.1259 20.3854 12.1996 20.2925 12.2925L17 15.5863V4C17 3.73478 16.8946 3.48043 16.7071 3.29289C16.5196 3.10536 16.2652 3 16 3C15.7348 3 15.4804 3.10536 15.2929 3.29289C15.1054 3.48043 15 3.73478 15 4V15.5863L11.7075 12.2925C11.5199 12.1049 11.2654 11.9994 11 11.9994C10.7346 11.9994 10.4801 12.1049 10.2925 12.2925C10.1049 12.4801 9.99944 12.7346 9.99944 13C9.99944 13.2654 10.1049 13.5199 10.2925 13.7075L15.2925 18.7075Z" fill="#070707"/>
|
|
1946
|
+
</svg>
|
|
1927
1947
|
`
|
|
1928
1948
|
};
|
|
1929
1949
|
|
|
@@ -1950,6 +1970,10 @@ const mathFinancesIcons = {
|
|
|
1950
1970
|
'xcircle-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1951
1971
|
<path d="M20.7075 12.7075L17.4138 16L20.7075 19.2925C20.8004 19.3854 20.8741 19.4957 20.9244 19.6171C20.9747 19.7385 21.0006 19.8686 21.0006 20C21.0006 20.1314 20.9747 20.2615 20.9244 20.3829C20.8741 20.5043 20.8004 20.6146 20.7075 20.7075C20.6146 20.8004 20.5043 20.8741 20.3829 20.9244C20.2615 20.9747 20.1314 21.0006 20 21.0006C19.8686 21.0006 19.7385 20.9747 19.6171 20.9244C19.4957 20.8741 19.3854 20.8004 19.2925 20.7075L16 17.4137L12.7075 20.7075C12.6146 20.8004 12.5043 20.8741 12.3829 20.9244C12.2615 20.9747 12.1314 21.0006 12 21.0006C11.8686 21.0006 11.7385 20.9747 11.6171 20.9244C11.4957 20.8741 11.3854 20.8004 11.2925 20.7075C11.1996 20.6146 11.1259 20.5043 11.0756 20.3829C11.0253 20.2615 10.9994 20.1314 10.9994 20C10.9994 19.8686 11.0253 19.7385 11.0756 19.6171C11.1259 19.4957 11.1996 19.3854 11.2925 19.2925L14.5863 16L11.2925 12.7075C11.1049 12.5199 10.9994 12.2654 10.9994 12C10.9994 11.7346 11.1049 11.4801 11.2925 11.2925C11.4801 11.1049 11.7346 10.9994 12 10.9994C12.2654 10.9994 12.5199 11.1049 12.7075 11.2925L16 14.5863L19.2925 11.2925C19.3854 11.1996 19.4957 11.1259 19.6171 11.0756C19.7385 11.0253 19.8686 10.9994 20 10.9994C20.1314 10.9994 20.2615 11.0253 20.3829 11.0756C20.5043 11.1259 20.6146 11.1996 20.7075 11.2925C20.8004 11.3854 20.8741 11.4957 20.9244 11.6171C20.9747 11.7385 21.0006 11.8686 21.0006 12C21.0006 12.1314 20.9747 12.2615 20.9244 12.3829C20.8741 12.5043 20.8004 12.6146 20.7075 12.7075ZM29 16C29 18.5712 28.2376 21.0846 26.8091 23.2224C25.3807 25.3603 23.3503 27.0265 20.9749 28.0104C18.5995 28.9944 15.9856 29.2518 13.4638 28.7502C10.9421 28.2486 8.6257 27.0105 6.80762 25.1924C4.98953 23.3743 3.75141 21.0579 3.2498 18.5362C2.74819 16.0144 3.00563 13.4006 3.98957 11.0251C4.97351 8.64968 6.63975 6.61935 8.77759 5.1909C10.9154 3.76244 13.4288 3 16 3C19.4467 3.00364 22.7512 4.37445 25.1884 6.81163C27.6256 9.24882 28.9964 12.5533 29 16ZM27 16C27 13.8244 26.3549 11.6977 25.1462 9.88873C23.9375 8.07979 22.2195 6.66989 20.2095 5.83733C18.1995 5.00476 15.9878 4.78692 13.854 5.21136C11.7202 5.6358 9.76021 6.68345 8.22183 8.22183C6.68345 9.7602 5.63581 11.7202 5.21137 13.854C4.78693 15.9878 5.00477 18.1995 5.83733 20.2095C6.66989 22.2195 8.07979 23.9375 9.88873 25.1462C11.6977 26.3549 13.8244 27 16 27C18.9164 26.9967 21.7123 25.8367 23.7745 23.7745C25.8367 21.7123 26.9967 18.9164 27 16Z" fill="#070707"/>
|
|
1952
1972
|
</svg>
|
|
1973
|
+
`,
|
|
1974
|
+
'pluscircle-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1975
|
+
<path d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM22 16C22 16.2652 21.8946 16.5196 21.7071 16.7071C21.5196 16.8946 21.2652 17 21 17H17V21C17 21.2652 16.8946 21.5196 16.7071 21.7071C16.5196 21.8946 16.2652 22 16 22C15.7348 22 15.4804 21.8946 15.2929 21.7071C15.1054 21.5196 15 21.2652 15 21V17H11C10.7348 17 10.4804 16.8946 10.2929 16.7071C10.1054 16.5196 10 16.2652 10 16C10 15.7348 10.1054 15.4804 10.2929 15.2929C10.4804 15.1054 10.7348 15 11 15H15V11C15 10.7348 15.1054 10.4804 15.2929 10.2929C15.4804 10.1054 15.7348 10 16 10C16.2652 10 16.5196 10.1054 16.7071 10.2929C16.8946 10.4804 17 10.7348 17 11V15H21C21.2652 15 21.5196 15.1054 21.7071 15.2929C21.8946 15.4804 22 15.7348 22 16Z" fill="#070707"/>
|
|
1976
|
+
</svg>
|
|
1953
1977
|
`
|
|
1954
1978
|
};
|
|
1955
1979
|
|
|
@@ -1964,6 +1988,10 @@ const officeEditingIcons = {
|
|
|
1964
1988
|
'trash-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1965
1989
|
<path d="M27 6H22V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2H13C12.2044 2 11.4413 2.31607 10.8787 2.87868C10.3161 3.44129 10 4.20435 10 5V6H5C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8H6V26C6 26.5304 6.21071 27.0391 6.58579 27.4142C6.96086 27.7893 7.46957 28 8 28H24C24.5304 28 25.0391 27.7893 25.4142 27.4142C25.7893 27.0391 26 26.5304 26 26V8H27C27.2652 8 27.5196 7.89464 27.7071 7.70711C27.8946 7.51957 28 7.26522 28 7C28 6.73478 27.8946 6.48043 27.7071 6.29289C27.5196 6.10536 27.2652 6 27 6ZM12 5C12 4.73478 12.1054 4.48043 12.2929 4.29289C12.4804 4.10536 12.7348 4 13 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V6H12V5ZM24 26H8V8H24V26ZM14 13V21C14 21.2652 13.8946 21.5196 13.7071 21.7071C13.5196 21.8946 13.2652 22 13 22C12.7348 22 12.4804 21.8946 12.2929 21.7071C12.1054 21.5196 12 21.2652 12 21V13C12 12.7348 12.1054 12.4804 12.2929 12.2929C12.4804 12.1054 12.7348 12 13 12C13.2652 12 13.5196 12.1054 13.7071 12.2929C13.8946 12.4804 14 12.7348 14 13ZM20 13V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22C18.7348 22 18.4804 21.8946 18.2929 21.7071C18.1054 21.5196 18 21.2652 18 21V13C18 12.7348 18.1054 12.4804 18.2929 12.2929C18.4804 12.1054 18.7348 12 19 12C19.2652 12 19.5196 12.1054 19.7071 12.2929C19.8946 12.4804 20 12.7348 20 13Z" fill="#070707"/>
|
|
1966
1990
|
</svg>
|
|
1991
|
+
`,
|
|
1992
|
+
'notepad-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1993
|
+
<path d="M21 16C21 16.2652 20.8946 16.5196 20.7071 16.7071C20.5196 16.8946 20.2652 17 20 17H12C11.7348 17 11.4804 16.8946 11.2929 16.7071C11.1054 16.5196 11 16.2652 11 16C11 15.7348 11.1054 15.4804 11.2929 15.2929C11.4804 15.1054 11.7348 15 12 15H20C20.2652 15 20.5196 15.1054 20.7071 15.2929C20.8946 15.4804 21 15.7348 21 16ZM20 19H12C11.7348 19 11.4804 19.1054 11.2929 19.2929C11.1054 19.4804 11 19.7348 11 20C11 20.2652 11.1054 20.5196 11.2929 20.7071C11.4804 20.8946 11.7348 21 12 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20C21 19.7348 20.8946 19.4804 20.7071 19.2929C20.5196 19.1054 20.2652 19 20 19ZM27 5V25C27 26.0609 26.5786 27.0783 25.8284 27.8284C25.0783 28.5786 24.0609 29 23 29H9C7.93913 29 6.92172 28.5786 6.17157 27.8284C5.42143 27.0783 5 26.0609 5 25V5C5 4.73478 5.10536 4.48043 5.29289 4.29289C5.48043 4.10536 5.73478 4 6 4H9V3C9 2.73478 9.10536 2.48043 9.29289 2.29289C9.48043 2.10536 9.73478 2 10 2C10.2652 2 10.5196 2.10536 10.7071 2.29289C10.8946 2.48043 11 2.73478 11 3V4H15V3C15 2.73478 15.1054 2.48043 15.2929 2.29289C15.4804 2.10536 15.7348 2 16 2C16.2652 2 16.5196 2.10536 16.7071 2.29289C16.8946 2.48043 17 2.73478 17 3V4H21V3C21 2.73478 21.1054 2.48043 21.2929 2.29289C21.4804 2.10536 21.7348 2 22 2C22.2652 2 22.5196 2.10536 22.7071 2.29289C22.8946 2.48043 23 2.73478 23 3V4H26C26.2652 4 26.5196 4.10536 26.7071 4.29289C26.8946 4.48043 27 4.73478 27 5ZM25 6H23V7C23 7.26522 22.8946 7.51957 22.7071 7.70711C22.5196 7.89464 22.2652 8 22 8C21.7348 8 21.4804 7.89464 21.2929 7.70711C21.1054 7.51957 21 7.26522 21 7V6H17V7C17 7.26522 16.8946 7.51957 16.7071 7.70711C16.5196 7.89464 16.2652 8 16 8C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V6H11V7C11 7.26522 10.8946 7.51957 10.7071 7.70711C10.5196 7.89464 10.2652 8 10 8C9.73478 8 9.48043 7.89464 9.29289 7.70711C9.10536 7.51957 9 7.26522 9 7V6H7V25C7 25.5304 7.21071 26.0391 7.58579 26.4142C7.96086 26.7893 8.46957 27 9 27H23C23.5304 27 24.0391 26.7893 24.4142 26.4142C24.7893 26.0391 25 25.5304 25 25V6Z" fill="#070707"/>
|
|
1994
|
+
</svg>
|
|
1967
1995
|
`,
|
|
1968
1996
|
'notepad-fill': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1969
1997
|
<path d="M26 4H23V3C23 2.73478 22.8946 2.48043 22.7071 2.29289C22.5196 2.10536 22.2652 2 22 2C21.7348 2 21.4804 2.10536 21.2929 2.29289C21.1054 2.48043 21 2.73478 21 3V4H17V3C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2C15.7348 2 15.4804 2.10536 15.2929 2.29289C15.1054 2.48043 15 2.73478 15 3V4H11V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2C9.73478 2 9.48043 2.10536 9.29289 2.29289C9.10536 2.48043 9 2.73478 9 3V4H6C5.73478 4 5.48043 4.10536 5.29289 4.29289C5.10536 4.48043 5 4.73478 5 5V25C5 26.0609 5.42143 27.0783 6.17157 27.8284C6.92172 28.5786 7.93913 29 9 29H23C24.0609 29 25.0783 28.5786 25.8284 27.8284C26.5786 27.0783 27 26.0609 27 25V5C27 4.73478 26.8946 4.48043 26.7071 4.29289C26.5196 4.10536 26.2652 4 26 4ZM15 7C15 6.73478 15.1054 6.48043 15.2929 6.29289C15.4804 6.10536 15.7348 6 16 6C16.2652 6 16.5196 6.10536 16.7071 6.29289C16.8946 6.48043 17 6.73478 17 7V8C17 8.26522 16.8946 8.51957 16.7071 8.70711C16.5196 8.89464 16.2652 9 16 9C15.7348 9 15.4804 8.89464 15.2929 8.70711C15.1054 8.51957 15 8.26522 15 8V7ZM10 9C9.73478 9 9.48043 8.89464 9.29289 8.70711C9.10536 8.51957 9 8.26522 9 8V7C9 6.73478 9.10536 6.48043 9.29289 6.29289C9.48043 6.10536 9.73478 6 10 6C10.2652 6 10.5196 6.10536 10.7071 6.29289C10.8946 6.48043 11 6.73478 11 7V8C11 8.26522 10.8946 8.51957 10.7071 8.70711C10.5196 8.89464 10.2652 9 10 9ZM20 21H12C11.7348 21 11.4804 20.8946 11.2929 20.7071C11.1054 20.5196 11 20.2652 11 20C11 19.7348 11.1054 19.4804 11.2929 19.2929C11.4804 19.1054 11.7348 19 12 19H20C20.2652 19 20.5196 19.1054 20.7071 19.2929C20.8946 19.4804 21 19.7348 21 20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21ZM20 17H12C11.7348 17 11.4804 16.8946 11.2929 16.7071C11.1054 16.5196 11 16.2652 11 16C11 15.7348 11.1054 15.4804 11.2929 15.2929C11.4804 15.1054 11.7348 15 12 15H20C20.2652 15 20.5196 15.1054 20.7071 15.2929C20.8946 15.4804 21 15.7348 21 16C21 16.2652 20.8946 16.5196 20.7071 16.7071C20.5196 16.8946 20.2652 17 20 17ZM23 8C23 8.26522 22.8946 8.51957 22.7071 8.70711C22.5196 8.89464 22.2652 9 22 9C21.7348 9 21.4804 8.89464 21.2929 8.70711C21.1054 8.51957 21 8.26522 21 8V7C21 6.73478 21.1054 6.48043 21.2929 6.29289C21.4804 6.10536 21.7348 6 22 6C22.2652 6 22.5196 6.10536 22.7071 6.29289C22.8946 6.48043 23 6.73478 23 7V8Z" fill="#070707"/>
|
|
@@ -1976,6 +2004,10 @@ const officeEditingIcons = {
|
|
|
1976
2004
|
'list-fill': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1977
2005
|
<path d="M26 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H26C26.5304 28 27.0391 27.7893 27.4142 27.4142C27.7893 27.0391 28 26.5304 28 26V6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4ZM24 23H8C7.73478 23 7.48043 22.8946 7.29289 22.7071C7.10536 22.5196 7 22.2652 7 22C7 21.7348 7.10536 21.4804 7.29289 21.2929C7.48043 21.1054 7.73478 21 8 21H24C24.2652 21 24.5196 21.1054 24.7071 21.2929C24.8946 21.4804 25 21.7348 25 22C25 22.2652 24.8946 22.5196 24.7071 22.7071C24.5196 22.8946 24.2652 23 24 23ZM24 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16C7 15.7348 7.10536 15.4804 7.29289 15.2929C7.48043 15.1054 7.73478 15 8 15H24C24.2652 15 24.5196 15.1054 24.7071 15.2929C24.8946 15.4804 25 15.7348 25 16C25 16.2652 24.8946 16.5196 24.7071 16.7071C24.5196 16.8946 24.2652 17 24 17ZM24 11H8C7.73478 11 7.48043 10.8946 7.29289 10.7071C7.10536 10.5196 7 10.2652 7 10C7 9.73478 7.10536 9.48043 7.29289 9.29289C7.48043 9.10536 7.73478 9 8 9H24C24.2652 9 24.5196 9.10536 24.7071 9.29289C24.8946 9.48043 25 9.73478 25 10C25 10.2652 24.8946 10.5196 24.7071 10.7071C24.5196 10.8946 24.2652 11 24 11Z" fill="#070707"/>
|
|
1978
2006
|
</svg>
|
|
2007
|
+
`,
|
|
2008
|
+
'copy-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2009
|
+
<path d="M27 4H11C10.7348 4 10.4804 4.10536 10.2929 4.29289C10.1054 4.48043 10 4.73478 10 5V10H5C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V27C4 27.2652 4.10536 27.5196 4.29289 27.7071C4.48043 27.8946 4.73478 28 5 28H21C21.2652 28 21.5196 27.8946 21.7071 27.7071C21.8946 27.5196 22 27.2652 22 27V22H27C27.2652 22 27.5196 21.8946 27.7071 21.7071C27.8946 21.5196 28 21.2652 28 21V5C28 4.73478 27.8946 4.48043 27.7071 4.29289C27.5196 4.10536 27.2652 4 27 4ZM20 26H6V12H20V26ZM26 20H22V11C22 10.7348 21.8946 10.4804 21.7071 10.2929C21.5196 10.1054 21.2652 10 21 10H12V6H26V20Z" fill="#070707"/>
|
|
2010
|
+
</svg>
|
|
1979
2011
|
`
|
|
1980
2012
|
};
|
|
1981
2013
|
|
|
@@ -3038,20 +3070,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3038
3070
|
|
|
3039
3071
|
class ChipsComponent {
|
|
3040
3072
|
options = input([]);
|
|
3073
|
+
isSingleSelection = input(false);
|
|
3041
3074
|
optionsChange = output();
|
|
3042
3075
|
toggle(option) {
|
|
3043
3076
|
const currentOptions = this.options();
|
|
3044
|
-
const
|
|
3045
|
-
|
|
3046
|
-
|
|
3077
|
+
const isSingle = this.isSingleSelection();
|
|
3078
|
+
let updatedOptions;
|
|
3079
|
+
if (isSingle) {
|
|
3080
|
+
updatedOptions = currentOptions.map((currentOption) => ({
|
|
3081
|
+
...currentOption,
|
|
3082
|
+
selected: currentOption.value === option.value
|
|
3083
|
+
}));
|
|
3084
|
+
}
|
|
3085
|
+
else {
|
|
3086
|
+
updatedOptions = currentOptions.map((currentOption) => currentOption.value === option.value
|
|
3087
|
+
? { ...currentOption, selected: !currentOption.selected }
|
|
3088
|
+
: currentOption);
|
|
3089
|
+
}
|
|
3047
3090
|
this.optionsChange.emit(updatedOptions);
|
|
3048
3091
|
}
|
|
3049
3092
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n type=\"checkbox\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] });
|
|
3093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] });
|
|
3051
3094
|
}
|
|
3052
3095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
3053
3096
|
type: Component,
|
|
3054
|
-
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n type=\"checkbox\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] }]
|
|
3097
|
+
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] }]
|
|
3055
3098
|
}] });
|
|
3056
3099
|
|
|
3057
3100
|
class DropdownComponent {
|
|
@@ -3588,6 +3631,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3588
3631
|
args: [{ selector: 'lib-link-action', imports: [NgClass, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover{text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
3589
3632
|
}] });
|
|
3590
3633
|
|
|
3634
|
+
class OverlayComponent {
|
|
3635
|
+
// Inputs
|
|
3636
|
+
position = input('right');
|
|
3637
|
+
disabled = input(false);
|
|
3638
|
+
width = input('200px');
|
|
3639
|
+
// Outputs
|
|
3640
|
+
opened = output();
|
|
3641
|
+
closed = output();
|
|
3642
|
+
// Private signals
|
|
3643
|
+
_isOpen = signal(false);
|
|
3644
|
+
_isClosing = signal(false);
|
|
3645
|
+
_isMobile = signal(false);
|
|
3646
|
+
// Public computed signals
|
|
3647
|
+
isOpen = this._isOpen.asReadonly();
|
|
3648
|
+
isClosing = this._isClosing.asReadonly();
|
|
3649
|
+
// Computed class methods
|
|
3650
|
+
getClasses = computed(() => {
|
|
3651
|
+
const classes = ['c-overlay'];
|
|
3652
|
+
if (this.isOpen()) {
|
|
3653
|
+
classes.push('c-overlay--open');
|
|
3654
|
+
}
|
|
3655
|
+
return classes.join(' ');
|
|
3656
|
+
});
|
|
3657
|
+
getBackdropClasses = computed(() => {
|
|
3658
|
+
const classes = ['c-overlay__backdrop'];
|
|
3659
|
+
if (this.isOpen()) {
|
|
3660
|
+
classes.push('c-overlay__backdrop--open');
|
|
3661
|
+
}
|
|
3662
|
+
return classes.join(' ');
|
|
3663
|
+
});
|
|
3664
|
+
getMenuClasses = computed(() => {
|
|
3665
|
+
const classes = ['c-overlay__menu'];
|
|
3666
|
+
classes.push(`c-overlay__menu--${this.position()}`);
|
|
3667
|
+
return classes.join(' ');
|
|
3668
|
+
});
|
|
3669
|
+
getMenuStyles = computed(() => {
|
|
3670
|
+
return {
|
|
3671
|
+
width: this._isMobile() ? '100%' : this.width()
|
|
3672
|
+
};
|
|
3673
|
+
});
|
|
3674
|
+
// Element references
|
|
3675
|
+
elementRef = inject(ElementRef);
|
|
3676
|
+
triggerButtonRef;
|
|
3677
|
+
platformId = inject(PLATFORM_ID);
|
|
3678
|
+
overlayMenu;
|
|
3679
|
+
constructor() {
|
|
3680
|
+
// Initialize mobile detection
|
|
3681
|
+
this.updateMobileDetection();
|
|
3682
|
+
// Only add resize listener if running in browser (not in SSR)
|
|
3683
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3684
|
+
window.addEventListener('resize', () => this.updateMobileDetection());
|
|
3685
|
+
}
|
|
3686
|
+
// Emit events when overlay state changes
|
|
3687
|
+
effect(() => {
|
|
3688
|
+
if (this.isOpen()) {
|
|
3689
|
+
this.opened.emit();
|
|
3690
|
+
}
|
|
3691
|
+
else if (!this.isOpen() && !this.isClosing()) {
|
|
3692
|
+
this.closed.emit();
|
|
3693
|
+
}
|
|
3694
|
+
});
|
|
3695
|
+
}
|
|
3696
|
+
// Mobile detection method
|
|
3697
|
+
updateMobileDetection() {
|
|
3698
|
+
// Check if running in browser (not in SSR)
|
|
3699
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3700
|
+
this._isMobile.set(window.innerWidth <= 768);
|
|
3701
|
+
}
|
|
3702
|
+
else {
|
|
3703
|
+
// Default to desktop view during SSR
|
|
3704
|
+
this._isMobile.set(false);
|
|
3705
|
+
}
|
|
3706
|
+
}
|
|
3707
|
+
// Public methods for trigger directive
|
|
3708
|
+
setTriggerButton(element) {
|
|
3709
|
+
this.triggerButtonRef = element;
|
|
3710
|
+
}
|
|
3711
|
+
toggleOverlay() {
|
|
3712
|
+
if (this.disabled()) {
|
|
3713
|
+
return;
|
|
3714
|
+
}
|
|
3715
|
+
if (this.isOpen() && !this.isClosing()) {
|
|
3716
|
+
this.closeOverlay();
|
|
3717
|
+
}
|
|
3718
|
+
else if (!this.isOpen() && !this.isClosing()) {
|
|
3719
|
+
this.openOverlay();
|
|
3720
|
+
}
|
|
3721
|
+
}
|
|
3722
|
+
openOverlay() {
|
|
3723
|
+
this._isClosing.set(false);
|
|
3724
|
+
this._isOpen.set(true);
|
|
3725
|
+
}
|
|
3726
|
+
closeOverlay() {
|
|
3727
|
+
this._isClosing.set(true);
|
|
3728
|
+
setTimeout(() => {
|
|
3729
|
+
this._isOpen.set(false);
|
|
3730
|
+
this._isClosing.set(false);
|
|
3731
|
+
}, 20); // Match animation duration
|
|
3732
|
+
}
|
|
3733
|
+
// Backdrop and keyboard handlers
|
|
3734
|
+
onBackdropClick() {
|
|
3735
|
+
this.closeOverlay();
|
|
3736
|
+
}
|
|
3737
|
+
onEscapeKey() {
|
|
3738
|
+
this.closeOverlay();
|
|
3739
|
+
}
|
|
3740
|
+
// Host listeners
|
|
3741
|
+
onClickOutside(event) {
|
|
3742
|
+
if (this.isOpen() && !this.isClosing()) {
|
|
3743
|
+
const clickedElement = event.target;
|
|
3744
|
+
const isClickInsideOverlay = this.elementRef.nativeElement.contains(clickedElement);
|
|
3745
|
+
const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
|
|
3746
|
+
if (!isClickInsideOverlay && !isClickOnTrigger) {
|
|
3747
|
+
this.closeOverlay();
|
|
3748
|
+
}
|
|
3749
|
+
}
|
|
3750
|
+
}
|
|
3751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3752
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n <!-- Backdrop for mobile -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-overlay__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-overlay__menu\"\n [ngClass]=\"getMenuClasses()\"\n [ngStyle]=\"getMenuStyles()\"\n #overlayMenu\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n \n <!-- Footer slot for mobile action buttons -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3753
|
+
}
|
|
3754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
|
|
3755
|
+
type: Component,
|
|
3756
|
+
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n <!-- Backdrop for mobile -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-overlay__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-overlay__menu\"\n [ngClass]=\"getMenuClasses()\"\n [ngStyle]=\"getMenuStyles()\"\n #overlayMenu\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n \n <!-- Footer slot for mobile action buttons -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"] }]
|
|
3757
|
+
}], ctorParameters: () => [], propDecorators: { overlayMenu: [{
|
|
3758
|
+
type: ViewChild,
|
|
3759
|
+
args: ['overlayMenu']
|
|
3760
|
+
}], onClickOutside: [{
|
|
3761
|
+
type: HostListener,
|
|
3762
|
+
args: ['document:click', ['$event']]
|
|
3763
|
+
}] } });
|
|
3764
|
+
|
|
3591
3765
|
class DropdownSelectComponent {
|
|
3592
3766
|
// Inputs
|
|
3593
3767
|
options = input([]);
|
|
@@ -3599,6 +3773,7 @@ class DropdownSelectComponent {
|
|
|
3599
3773
|
cancelButtonText = input('Cancel');
|
|
3600
3774
|
acceptButtonText = input('Accept');
|
|
3601
3775
|
position = input('right');
|
|
3776
|
+
width = input('fit-content');
|
|
3602
3777
|
// Outputs
|
|
3603
3778
|
optionSelected = output();
|
|
3604
3779
|
optionDeselected = output();
|
|
@@ -3609,46 +3784,22 @@ class DropdownSelectComponent {
|
|
|
3609
3784
|
// Private signals
|
|
3610
3785
|
_filteredOptions = signal([]);
|
|
3611
3786
|
_searchText = signal('');
|
|
3612
|
-
_isOpen = signal(false);
|
|
3613
|
-
_isClosing = signal(false);
|
|
3614
3787
|
_internalSelectedValues = signal([]);
|
|
3615
3788
|
_isInitialized = signal(false);
|
|
3616
3789
|
_isMobile = signal(false);
|
|
3617
3790
|
_tempSelectedValues = signal([]);
|
|
3791
|
+
_isOverlayOpen = signal(false);
|
|
3618
3792
|
searchControl = new FormControl('');
|
|
3619
3793
|
// Public computed signals
|
|
3620
3794
|
filteredOptions = this._filteredOptions.asReadonly();
|
|
3621
3795
|
searchText = this._searchText.asReadonly();
|
|
3622
|
-
isOpen = this._isOpen.asReadonly();
|
|
3623
|
-
isClosing = this._isClosing.asReadonly();
|
|
3624
|
-
// Computed class methods
|
|
3625
|
-
getClasses = computed(() => {
|
|
3626
|
-
const classes = ['c-dropdown-select'];
|
|
3627
|
-
if (this.isOpen()) {
|
|
3628
|
-
classes.push('c-dropdown-select--open');
|
|
3629
|
-
}
|
|
3630
|
-
return classes.join(' ');
|
|
3631
|
-
});
|
|
3632
|
-
getBackdropClasses = computed(() => {
|
|
3633
|
-
const classes = ['c-dropdown-select__backdrop'];
|
|
3634
|
-
if (this.isOpen()) {
|
|
3635
|
-
classes.push('c-dropdown-select__backdrop--open');
|
|
3636
|
-
}
|
|
3637
|
-
return classes.join(' ');
|
|
3638
|
-
});
|
|
3639
|
-
getMenuClasses = computed(() => {
|
|
3640
|
-
const classes = ['c-dropdown-select__menu'];
|
|
3641
|
-
classes.push(`c-dropdown-select__menu--${this.position()}`);
|
|
3642
|
-
return classes.join(' ');
|
|
3643
|
-
});
|
|
3644
3796
|
// Computed values
|
|
3645
3797
|
isMultiSelect = computed(() => this.variant() === 'multiselect');
|
|
3646
3798
|
showSearchBar = computed(() => this.searchBarEnabled() && !this.isMultiSelect());
|
|
3799
|
+
showMobileActions = computed(() => this._isMobile() && this._isOverlayOpen());
|
|
3647
3800
|
// Element references
|
|
3648
|
-
elementRef = inject(ElementRef);
|
|
3649
|
-
triggerButtonRef;
|
|
3650
3801
|
platformId = inject(PLATFORM_ID);
|
|
3651
|
-
|
|
3802
|
+
overlay;
|
|
3652
3803
|
constructor() {
|
|
3653
3804
|
// Initialize mobile detection
|
|
3654
3805
|
this.updateMobileDetection();
|
|
@@ -3776,7 +3927,9 @@ class DropdownSelectComponent {
|
|
|
3776
3927
|
this._internalSelectedValues.set(option.value);
|
|
3777
3928
|
this.optionSelected.emit(option);
|
|
3778
3929
|
this.emitValueChange();
|
|
3779
|
-
this.
|
|
3930
|
+
if (this.overlay) {
|
|
3931
|
+
this.overlay.toggleOverlay();
|
|
3932
|
+
}
|
|
3780
3933
|
}
|
|
3781
3934
|
filterOptions() {
|
|
3782
3935
|
const search = this._searchText().trim().toLowerCase();
|
|
@@ -3827,48 +3980,37 @@ class DropdownSelectComponent {
|
|
|
3827
3980
|
}
|
|
3828
3981
|
// Public methods for trigger directive
|
|
3829
3982
|
setTriggerButton(element) {
|
|
3830
|
-
this.
|
|
3983
|
+
if (this.overlay) {
|
|
3984
|
+
this.overlay.setTriggerButton(element);
|
|
3985
|
+
}
|
|
3831
3986
|
}
|
|
3832
3987
|
toggleDropdown() {
|
|
3833
|
-
if (this.
|
|
3834
|
-
|
|
3835
|
-
}
|
|
3836
|
-
if (this.isOpen() && !this.isClosing()) {
|
|
3837
|
-
this.closeDropdown();
|
|
3838
|
-
}
|
|
3839
|
-
else if (!this.isOpen() && !this.isClosing()) {
|
|
3840
|
-
this.openDropdown();
|
|
3988
|
+
if (this.overlay) {
|
|
3989
|
+
this.overlay.toggleOverlay();
|
|
3841
3990
|
}
|
|
3842
3991
|
}
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
this.
|
|
3992
|
+
// Overlay event handlers
|
|
3993
|
+
onOverlayOpened() {
|
|
3994
|
+
this._isOverlayOpen.set(true);
|
|
3846
3995
|
// On mobile, initialize temporary values with current selection
|
|
3847
3996
|
if (this._isMobile()) {
|
|
3848
3997
|
this._tempSelectedValues.set(this._internalSelectedValues());
|
|
3849
3998
|
}
|
|
3850
3999
|
}
|
|
3851
|
-
|
|
3852
|
-
this.
|
|
3853
|
-
this._isOpen.set(false);
|
|
3854
|
-
this._isClosing.set(false);
|
|
4000
|
+
onOverlayClosed() {
|
|
4001
|
+
this._isOverlayOpen.set(false);
|
|
3855
4002
|
// Clear search when closing dropdown
|
|
3856
4003
|
this.searchControl.setValue('');
|
|
3857
4004
|
this._searchText.set('');
|
|
3858
4005
|
this._filteredOptions.set(this.options());
|
|
3859
4006
|
}
|
|
3860
|
-
// Backdrop and keyboard handlers
|
|
3861
|
-
onBackdropClick() {
|
|
3862
|
-
this.closeDropdown();
|
|
3863
|
-
}
|
|
3864
|
-
onEscapeKey() {
|
|
3865
|
-
this.closeDropdown();
|
|
3866
|
-
}
|
|
3867
4007
|
onCancelClick() {
|
|
3868
4008
|
// On mobile, restore original values (no change)
|
|
3869
4009
|
// On desktop, this shouldn't be called, but if it is, just close
|
|
3870
4010
|
this.cancelClicked.emit();
|
|
3871
|
-
this.
|
|
4011
|
+
if (this.overlay) {
|
|
4012
|
+
this.overlay.toggleOverlay();
|
|
4013
|
+
}
|
|
3872
4014
|
}
|
|
3873
4015
|
onAcceptClick() {
|
|
3874
4016
|
if (this._isMobile()) {
|
|
@@ -3904,39 +4046,26 @@ class DropdownSelectComponent {
|
|
|
3904
4046
|
}
|
|
3905
4047
|
this.acceptClicked.emit(value);
|
|
3906
4048
|
}
|
|
3907
|
-
this.
|
|
3908
|
-
|
|
3909
|
-
// Host listeners
|
|
3910
|
-
onClickOutside(event) {
|
|
3911
|
-
if (this.isOpen() && !this.isClosing()) {
|
|
3912
|
-
const clickedElement = event.target;
|
|
3913
|
-
const isClickInsideDropdown = this.elementRef.nativeElement.contains(clickedElement);
|
|
3914
|
-
const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
|
|
3915
|
-
if (!isClickInsideDropdown && !isClickOnTrigger) {
|
|
3916
|
-
this.closeDropdown();
|
|
3917
|
-
}
|
|
4049
|
+
if (this.overlay) {
|
|
4050
|
+
this.overlay.toggleOverlay();
|
|
3918
4051
|
}
|
|
3919
4052
|
}
|
|
3920
4053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n <!-- Backdrop for mobile -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close dropdown\"\n ></div>\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen() || isClosing()) {\n <div\n class=\"c-dropdown-select__menu\"\n [ngClass]=\"getMenuClasses()\"\n #dropdownMenu\n >\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if\n (isMultiSelect()) {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons -->\n <div class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n </div>\n }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown-select__menu--right{left:0;right:auto}.c-dropdown-select__menu--left{left:auto;right:0}.c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }] });
|
|
4054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [position]=\"position()\"\n [disabled]=\"disabled()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n [width]=\"width()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
|
|
3922
4055
|
}
|
|
3923
4056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
3924
4057
|
type: Component,
|
|
3925
4058
|
args: [{ selector: 'lib-dropdown-select', imports: [
|
|
3926
|
-
NgClass,
|
|
3927
4059
|
ReactiveFormsModule,
|
|
3928
4060
|
IconComponent,
|
|
3929
4061
|
CheckboxComponent,
|
|
3930
4062
|
InputSearchComponent,
|
|
3931
4063
|
LinkActionComponent,
|
|
3932
|
-
|
|
3933
|
-
], template: "<
|
|
3934
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
4064
|
+
OverlayComponent,
|
|
4065
|
+
], template: "<lib-overlay\n [position]=\"position()\"\n [disabled]=\"disabled()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n [width]=\"width()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
|
|
4066
|
+
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
3935
4067
|
type: ViewChild,
|
|
3936
|
-
args: [
|
|
3937
|
-
}], onClickOutside: [{
|
|
3938
|
-
type: HostListener,
|
|
3939
|
-
args: ['document:click', ['$event']]
|
|
4068
|
+
args: [OverlayComponent]
|
|
3940
4069
|
}] } });
|
|
3941
4070
|
|
|
3942
4071
|
class DropdownSelectTriggerDirective {
|
|
@@ -5284,7 +5413,7 @@ class SelectComponent {
|
|
|
5284
5413
|
useExisting: forwardRef(() => SelectComponent),
|
|
5285
5414
|
multi: true,
|
|
5286
5415
|
},
|
|
5287
|
-
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "position"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
5416
|
+
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n [width]=\"'stretch'\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "position", "width"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
5288
5417
|
}
|
|
5289
5418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5290
5419
|
type: Component,
|
|
@@ -5304,7 +5433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
5304
5433
|
useExisting: forwardRef(() => SelectComponent),
|
|
5305
5434
|
multi: true,
|
|
5306
5435
|
},
|
|
5307
|
-
], template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"] }]
|
|
5436
|
+
], template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n [width]=\"'stretch'\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"] }]
|
|
5308
5437
|
}], ctorParameters: () => [] });
|
|
5309
5438
|
|
|
5310
5439
|
class SocialLoginComponent {
|
|
@@ -6079,11 +6208,11 @@ class ModalComponent {
|
|
|
6079
6208
|
}
|
|
6080
6209
|
}
|
|
6081
6210
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6082
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);
|
|
6211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
6083
6212
|
}
|
|
6084
6213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
6085
6214
|
type: Component,
|
|
6086
|
-
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);
|
|
6215
|
+
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
|
|
6087
6216
|
}], ctorParameters: () => [] });
|
|
6088
6217
|
|
|
6089
6218
|
class ModalService {
|
|
@@ -6333,9 +6462,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6333
6462
|
args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n <button\n [ngClass]=\"[\n 'c-menu-item',\n selected() ? 'c-menu-item--selected' : '',\n disabled() ? 'c-menu-item--disabled' : '',\n hasChildren() ? 'c-menu-item--has-children' : '',\n hasChildren() ? 'c-menu-item--expanded' : ''\n ]\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-selected]=\"selected()\"\n [attr.aria-expanded]=\"hasChildren() ? true : null\"\n (click)=\"handleClick()\"\n >\n <span class=\"c-menu-item__icon\">\n <lib-icon\n [name]=\"computedIcon()\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n @if (label()) {\n <span class=\"c-menu-item__label\">{{ label() }}</span>\n } @if (hasTag()) {\n <span class=\"c-menu-item__tag-container\">\n <lib-tag\n [text]=\"tagLabel()\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n class=\"c-menu-item__tag\"\n ></lib-tag>\n </span>\n } @if (showArrowIcon()) {\n <span class=\"c-menu-item__expand-icon\">\n <lib-icon\n name=\"caretright-regular\"\n [size]=\"'md'\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n </button>\n\n @if (hasChildren()) {\n <div class=\"c-menu-item__children\">\n <div class=\"c-menu-item__children-items\">\n @for (child of children(); track child.label) {\n <lib-menu-child-item\n [label]=\"child.label\"\n [disabled]=\"child.disabled || false\"\n [selected]=\"child.selected || false\"\n (clicked)=\"handleChildClick(child)\"\n >\n </lib-menu-child-item>\n }\n </div>\n </div>\n }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
6334
6463
|
}] });
|
|
6335
6464
|
|
|
6465
|
+
class OverlayTriggerDirective {
|
|
6466
|
+
libOverlayTriggerFor = input.required();
|
|
6467
|
+
elementRef = inject(ElementRef);
|
|
6468
|
+
onClick() {
|
|
6469
|
+
const overlay = this.libOverlayTriggerFor();
|
|
6470
|
+
if (overlay) {
|
|
6471
|
+
overlay.setTriggerButton(this.elementRef.nativeElement);
|
|
6472
|
+
overlay.toggleOverlay();
|
|
6473
|
+
}
|
|
6474
|
+
}
|
|
6475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6476
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: OverlayTriggerDirective, isStandalone: true, selector: "[libOverlayTriggerFor]", inputs: { libOverlayTriggerFor: { classPropertyName: "libOverlayTriggerFor", publicName: "libOverlayTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
6477
|
+
}
|
|
6478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayTriggerDirective, decorators: [{
|
|
6479
|
+
type: Directive,
|
|
6480
|
+
args: [{
|
|
6481
|
+
selector: '[libOverlayTriggerFor]',
|
|
6482
|
+
}]
|
|
6483
|
+
}], propDecorators: { onClick: [{
|
|
6484
|
+
type: HostListener,
|
|
6485
|
+
args: ['click']
|
|
6486
|
+
}] } });
|
|
6487
|
+
|
|
6336
6488
|
/**
|
|
6337
6489
|
* Generated bundle index. Do not edit.
|
|
6338
6490
|
*/
|
|
6339
6491
|
|
|
6340
|
-
export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownComponent, DropdownSelectComponent, DropdownSelectTriggerDirective, DropdownTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
|
|
6492
|
+
export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownComponent, DropdownSelectComponent, DropdownSelectTriggerDirective, DropdownTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, OverlayComponent, OverlayTriggerDirective, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
|
|
6341
6493
|
//# sourceMappingURL=crowdfarming-oliva-ds.mjs.map
|