@trendyol/baklava 2.0.0-beta.32 → 2.0.0-beta.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/complain.svg +3 -0
- package/dist/assets/full_size.svg +3 -0
- package/dist/assets/group_of_people.svg +8 -0
- package/dist/assets/hourglass.svg +3 -0
- package/dist/assets/instagram.svg +3 -0
- package/dist/assets/market_processing.svg +7 -0
- package/dist/assets/puzzle.svg +3 -0
- package/dist/assets/warehouse.svg +3 -0
- package/dist/assets/youtube.svg +3 -0
- package/dist/baklava.js +1 -1
- package/dist/chunk-54XXQVFL.js +5 -0
- package/dist/chunk-54XXQVFL.js.map +7 -0
- package/dist/{chunk-YFUMYW57.js → chunk-7SDGSJ2P.js} +4 -4
- package/dist/chunk-7SDGSJ2P.js.map +7 -0
- package/dist/{chunk-LZHSSAHO.js → chunk-EX6STMCI.js} +3 -3
- package/dist/{chunk-LZHSSAHO.js.map → chunk-EX6STMCI.js.map} +1 -1
- package/dist/chunk-SI4AOUS5.js +25 -0
- package/dist/chunk-SI4AOUS5.js.map +7 -0
- package/dist/chunk-SRQS24UV.js +18 -0
- package/dist/chunk-SRQS24UV.js.map +7 -0
- package/dist/{chunk-QVWNLWDE.js → chunk-YZQVPLSP.js} +3 -3
- package/dist/{chunk-QVWNLWDE.js.map → chunk-YZQVPLSP.js.map} +2 -2
- package/dist/components/alert/bl-alert.js +1 -1
- package/dist/components/badge/bl-badge.js +1 -1
- package/dist/components/button/bl-button.js +1 -1
- package/dist/components/icon/icon-list.js +1 -1
- package/dist/components/icon/icon-list.js.map +2 -2
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/select/bl-select.js +1 -1
- package/dist/components/tab-group/bl-tab-group.js +1 -1
- package/dist/components/tab-group/tab/bl-tab.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/themes/default.css +1 -1
- package/dist/themes/default.css.map +2 -2
- package/package.json +1 -1
- package/dist/chunk-6UWMQKJW.js +0 -5
- package/dist/chunk-6UWMQKJW.js.map +0 -7
- package/dist/chunk-EELZVHM7.js +0 -24
- package/dist/chunk-EELZVHM7.js.map +0 -7
- package/dist/chunk-IB7GARWV.js +0 -18
- package/dist/chunk-IB7GARWV.js.map +0 -7
- package/dist/chunk-YFUMYW57.js.map +0 -7
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 1C1.79086 1 0 2.79086 0 5V16C0 18.2091 1.79086 20 4 20H5V21.9378C5 22.8268 5.96993 23.321 6.6247 22.7657L9.88552 20H20C22.2091 20 24 18.2091 24 16V5C24 2.79086 22.2091 1 20 1H4ZM10.5 5.5C10.5 4.67157 11.1716 4 12 4C12.8284 4 13.5 4.67157 13.5 5.5V11.5C13.5 12.3284 12.8284 13 12 13C11.1716 13 10.5 12.3284 10.5 11.5V5.5ZM12 14C11.1716 14 10.5 14.6716 10.5 15.5C10.5 16.3284 11.1716 17 12 17C12.8284 17 13.5 16.3284 13.5 15.5C13.5 14.6716 12.8284 14 12 14Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3H3V6.5C3 7.32843 2.32843 8 1.5 8C0.671573 8 0 7.32843 0 6.5V2.5C0 1.11929 1.11929 0 2.5 0H6.5C7.32843 0 8 0.671573 8 1.5C8 2.32843 7.32843 3 6.5 3ZM17.5 3H21V6.5C21 7.32843 21.6716 8 22.5 8C23.3284 8 24 7.32843 24 6.5V2.5C24 1.11929 22.8807 0 21.5 0H17.5C16.6716 0 16 0.671573 16 1.5C16 2.32843 16.6716 3 17.5 3ZM3 21V17.5C3 16.6716 2.32843 16 1.5 16C0.671573 16 0 16.6716 0 17.5V21.5C0 22.8807 1.11929 24 2.5 24H6.5C7.32843 24 8 23.3284 8 22.5C8 21.6716 7.32843 21 6.5 21H3ZM21 17.5V21H17.5C16.6716 21 16 21.6716 16 22.5C16 23.3284 16.6716 24 17.5 24H21.5C22.8807 24 24 22.8807 24 21.5V17.5C24 16.6716 23.3284 16 22.5 16C21.6716 16 21 16.6716 21 17.5Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21.5567 18.4881C21.3804 15.9834 19.273 13.8335 16.253 12.7501C16.6244 12.7119 17.0052 12.6923 17.3922 12.6923C20.9758 12.6923 24 14.3507 24 16.9814C24 17.901 23.022 18.308 21.5567 18.4881Z" fill="currentColor"/>
|
|
3
|
+
<path d="M18.1986 7.84617C18.1986 9.1198 17.8265 10.3042 17.188 11.2909C17.2986 11.302 17.4109 11.3077 17.5246 11.3077C19.3956 11.3077 20.8947 9.76727 20.8947 7.84615C20.8947 5.92504 19.3956 4.38462 17.5246 4.38462C17.4109 4.38462 17.2986 4.3903 17.188 4.40142C17.8265 5.38814 18.1986 6.57253 18.1986 7.84617Z" fill="currentColor"/>
|
|
4
|
+
<path d="M8.70114 12.9851C8.75011 13.0196 8.7996 13.0535 8.8496 13.0866C5.61324 13.8937 3.2147 15.8597 2.77032 18.2345C1.13287 18.0926 0 17.7227 0 16.7589C0 14.2647 2.86733 12.6923 6.26505 12.6923C7.12176 12.6923 7.94679 12.7934 8.70114 12.9851Z" fill="currentColor"/>
|
|
5
|
+
<path d="M7.00294 4.51842C6.40966 5.48118 6.06622 6.62247 6.06622 7.84616C6.06622 9.06984 6.40966 10.2111 7.00293 11.1739C6.70588 11.2611 6.39167 11.3077 6.06623 11.3077C4.19521 11.3077 2.6961 9.76727 2.6961 7.84615C2.6961 5.92504 4.19521 4.38462 6.06623 4.38462C6.39167 4.38462 6.70588 4.43125 7.00294 4.51842Z" fill="currentColor"/>
|
|
6
|
+
<path d="M12.1325 14.0769C7.77027 14.0769 4.04421 16.0113 4.04421 19.0769C4.04421 20.6154 7.89578 21 12.1325 21C16.3692 21 20.2208 21 20.2208 19.0769C20.2208 16.0102 16.519 14.0769 12.1325 14.0769Z" fill="currentColor"/>
|
|
7
|
+
<path d="M12.1325 12.6923C14.7519 12.6923 16.8507 10.5357 16.8507 7.84615C16.8507 5.15659 14.7519 3 12.1325 3C9.51397 3 7.41433 5.15659 7.41433 7.84615C7.41433 10.5357 9.51397 12.6923 12.1325 12.6923Z" fill="currentColor"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1.5C1 0.671573 1.67157 0 2.5 0H21.5C22.3284 0 23 0.671573 23 1.5C23 2.32843 22.3284 3 21.5 3H21V5C21 8.31371 18.3137 11 15 11H14.9902C14.438 11 13.9902 11.4477 13.9902 12C13.9902 12.5523 14.438 13 14.9902 13H15C18.3137 13 21 15.6863 21 19V21H21.5C22.3284 21 23 21.6716 23 22.5C23 23.3284 22.3284 24 21.5 24H2.5C1.67157 24 1 23.3284 1 22.5C1 21.6716 1.67157 21 2.5 21H3V19C3 15.6863 5.68629 13 9 13H8.92578C9.47649 13 9.92355 12.5547 9.92577 12.004C9.92801 11.4502 9.47964 11 8.92578 11H9C5.68629 11 3 8.31371 3 5V3H2.5C1.67157 3 1 2.32843 1 1.5ZM7 4.5C7 3.94772 6.55228 3.5 6 3.5C5.44772 3.5 5 3.94772 5 4.5V5C5 7.20914 6.79086 9 9 9H9.5C10.0523 9 10.5 8.55228 10.5 8C10.5 7.44772 10.0523 7 9.5 7H9C7.89543 7 7 6.10457 7 5V4.5ZM10.5 16C10.5 16.5523 10.0523 17 9.5 17H9C7.89543 17 7 17.8954 7 19V19.5C7 20.0523 6.55228 20.5 6 20.5C5.44772 20.5 5 20.0523 5 19.5V19C5 16.7909 6.79086 15 9 15H9.5C10.0523 15 10.5 15.4477 10.5 16Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.9949 7.99752C9.79198 7.99752 7.99216 9.79741 7.99216 12.0004C7.99216 14.2034 9.79198 16.0033 11.9949 16.0033C14.1978 16.0033 15.9976 14.2034 15.9976 12.0004C15.9976 9.79741 14.1978 7.99752 11.9949 7.99752V7.99752ZM23.9984 12.0004C23.9984 10.3411 24.0125 8.7006 23.9187 7.04601C23.825 5.12425 23.3891 3.42279 21.983 2.01662C20.5769 0.610454 18.8755 0.174542 16.9538 0.0807979C15.2946 -0.0129466 13.6541 0.00111506 11.9996 0.00111506C10.3451 0.00111506 8.6999 -0.0129466 7.04537 0.0807979C5.12369 0.174542 3.42229 0.610454 2.01618 2.01662C0.610064 3.42279 0.174169 5.12425 0.0804285 7.04601C-0.0133123 8.70529 0.000748817 10.3458 0.000748817 12.0004C0.000748817 13.655 -0.0133123 15.3002 0.0804285 16.9548C0.174169 18.8766 0.610064 20.578 2.01618 21.9842C3.42229 23.3904 5.12369 23.8263 7.04537 23.92C8.70459 24.0138 10.3451 23.9997 11.9996 23.9997C13.6541 23.9997 15.2993 24.0138 16.9538 23.92C18.8755 23.8263 20.5816 23.3904 21.983 21.9842C23.3891 20.578 23.825 18.8766 23.9187 16.9548C24.0172 15.3002 23.9984 13.6597 23.9984 12.0004ZM11.9949 18.1594C8.58741 18.1594 5.83612 15.408 5.83612 12.0004C5.83612 8.5928 8.58741 5.8414 11.9949 5.8414C15.4024 5.8414 18.1537 8.5928 18.1537 12.0004C18.1537 15.408 15.4024 18.1594 11.9949 18.1594V18.1594ZM18.4068 7.02726C17.61 7.02726 16.9678 6.38512 16.9678 5.58829C16.9678 4.79146 17.61 4.14931 18.4068 4.14931C19.2036 4.14931 19.8457 4.79146 19.8457 5.58829C19.8457 6.38512 19.2036 7.02726 18.4068 7.02726Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="path-1-inside-1_12547_26193" fill="white">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1178 0.287002C14.7878 -0.200256 15.7259 -0.0521306 16.2132 0.617848L19.4003 5.00011H22.5C23.3284 5.00011 24 5.67168 24 6.50011V8.50011C24 9.27846 23.4072 9.91835 22.6484 9.99286C21.104 8.74641 19.1392 8.00009 17 8.00009C14.8567 8.00009 12.8884 8.7493 11.3426 10.0001H1.5C0.671573 10.0001 0 9.32853 0 8.50011V6.50011C0 5.67168 0.671573 5.00011 1.5 5.00011H4.59975L7.78685 0.617848C8.2741 -0.0521306 9.21223 -0.200256 9.88221 0.287002C10.5522 0.774259 10.7003 1.71238 10.2131 2.38236L8.30924 5.00011H15.6908L13.787 2.38236C13.2997 1.71238 13.4479 0.774259 14.1178 0.287002ZM8 17.0001C8 14.695 8.86656 12.5924 10.2917 11.0001H1L2.98459 21.5545C3.25126 22.9727 4.48986 24.0001 5.93292 24.0001H11.3427C9.30367 22.3502 8 19.8274 8 17.0001ZM10 17C10 13.15 13.15 10 17 10C20.85 10 24 13.15 24 17C24 20.85 20.85 24 17 24C13.15 24 10 20.85 10 17ZM17 17.7H19.1C19.52 17.7 19.8 17.42 19.8 17C19.8 16.58 19.52 16.3 19.1 16.3H17.7V13.5C17.7 13.08 17.42 12.8 17 12.8C16.58 12.8 16.3 13.08 16.3 13.5V17C16.3 17.42 16.58 17.7 17 17.7Z"/>
|
|
4
|
+
</mask>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1178 0.287002C14.7878 -0.200256 15.7259 -0.0521306 16.2132 0.617848L19.4003 5.00011H22.5C23.3284 5.00011 24 5.67168 24 6.50011V8.50011C24 9.27846 23.4072 9.91835 22.6484 9.99286C21.104 8.74641 19.1392 8.00009 17 8.00009C14.8567 8.00009 12.8884 8.7493 11.3426 10.0001H1.5C0.671573 10.0001 0 9.32853 0 8.50011V6.50011C0 5.67168 0.671573 5.00011 1.5 5.00011H4.59975L7.78685 0.617848C8.2741 -0.0521306 9.21223 -0.200256 9.88221 0.287002C10.5522 0.774259 10.7003 1.71238 10.2131 2.38236L8.30924 5.00011H15.6908L13.787 2.38236C13.2997 1.71238 13.4479 0.774259 14.1178 0.287002ZM8 17.0001C8 14.695 8.86656 12.5924 10.2917 11.0001H1L2.98459 21.5545C3.25126 22.9727 4.48986 24.0001 5.93292 24.0001H11.3427C9.30367 22.3502 8 19.8274 8 17.0001ZM10 17C10 13.15 13.15 10 17 10C20.85 10 24 13.15 24 17C24 20.85 20.85 24 17 24C13.15 24 10 20.85 10 17ZM17 17.7H19.1C19.52 17.7 19.8 17.42 19.8 17C19.8 16.58 19.52 16.3 19.1 16.3H17.7V13.5C17.7 13.08 17.42 12.8 17 12.8C16.58 12.8 16.3 13.08 16.3 13.5V17C16.3 17.42 16.58 17.7 17 17.7Z" fill="currentColor"/>
|
|
6
|
+
<path d="M16.2132 0.617848L15.4045 1.20602L15.4045 1.20602L16.2132 0.617848ZM19.4003 5.00011L18.5916 5.58828L18.8911 6.00011H19.4003V5.00011ZM22.6484 9.99286L22.0203 10.771L22.3388 11.0281L22.7461 10.9881L22.6484 9.99286ZM11.3426 10.0001V11.0001H11.6966L11.9717 10.7775L11.3426 10.0001ZM4.59975 5.00011V6.00011H5.10898L5.40849 5.58828L4.59975 5.00011ZM7.78685 0.617848L8.59558 1.20602L8.59558 1.20602L7.78685 0.617848ZM9.88221 0.287002L9.29404 1.09574L9.29404 1.09574L9.88221 0.287002ZM10.2131 2.38236L9.40432 1.79419L9.40432 1.79419L10.2131 2.38236ZM8.30924 5.00011L7.50051 4.41193L6.34547 6.00011H8.30924V5.00011ZM15.6908 5.00011V6.00011H17.6546L16.4995 4.41193L15.6908 5.00011ZM13.787 2.38236L12.9783 2.97053L12.9783 2.97053L13.787 2.38236ZM10.2917 11.0001L11.0368 11.667L12.5287 10.0001H10.2917V11.0001ZM1 11.0001V10.0001H-0.205559L0.017223 11.1849L1 11.0001ZM2.98459 21.5545L2.00181 21.7393L2.00181 21.7393L2.98459 21.5545ZM11.3427 24.0001V25.0001H14.1682L11.9717 23.2227L11.3427 24.0001ZM17.7 16.3H16.7V17.3H17.7V16.3ZM17.0219 0.0296769C16.2098 -1.08696 14.6463 -1.33383 13.5297 -0.521735L14.706 1.09574C14.9293 0.933318 15.242 0.982694 15.4045 1.20602L17.0219 0.0296769ZM20.209 4.41193L17.0219 0.0296767L15.4045 1.20602L18.5916 5.58828L20.209 4.41193ZM22.5 4.00011H19.4003V6.00011H22.5V4.00011ZM25 6.50011C25 5.11939 23.8807 4.00011 22.5 4.00011V6.00011C22.7761 6.00011 23 6.22396 23 6.50011H25ZM25 8.50011V6.50011H23V8.50011H25ZM22.7461 10.9881C24.0118 10.8638 25 9.79796 25 8.50011H23C23 8.75896 22.8025 8.97292 22.5507 8.99765L22.7461 10.9881ZM17 9.00009C18.9024 9.00009 20.6473 9.6629 22.0203 10.771L23.2764 9.21469C21.5607 7.82992 19.3759 7.00009 17 7.00009V9.00009ZM11.9717 10.7775C13.3459 9.66546 15.0939 9.00009 17 9.00009V7.00009C14.6195 7.00009 12.4308 7.83314 10.7136 9.22274L11.9717 10.7775ZM1.5 11.0001H11.3426V9.00011H1.5V11.0001ZM-1 8.50011C-1 9.88082 0.119288 11.0001 1.5 11.0001V9.00011C1.22386 9.00011 1 8.77625 1 8.50011H-1ZM-1 6.50011V8.50011H1V6.50011H-1ZM1.5 4.00011C0.119288 4.00011 -1 5.11939 -1 6.50011H1C1 6.22396 1.22386 6.00011 1.5 6.00011V4.00011ZM4.59975 4.00011H1.5V6.00011H4.59975V4.00011ZM6.97811 0.0296766L3.79101 4.41193L5.40849 5.58828L8.59558 1.20602L6.97811 0.0296766ZM10.4704 -0.521734C9.35375 -1.33383 7.79021 -1.08696 6.97811 0.0296769L8.59558 1.20602C8.758 0.982694 9.07071 0.933319 9.29404 1.09574L10.4704 -0.521734ZM11.0218 2.97054C11.8339 1.8539 11.587 0.290361 10.4704 -0.521735L9.29404 1.09574C9.51736 1.25816 9.56674 1.57087 9.40432 1.79419L11.0218 2.97054ZM9.11798 5.58828L11.0218 2.97053L9.40432 1.79419L7.50051 4.41193L9.11798 5.58828ZM15.6908 4.00011H8.30924V6.00011H15.6908V4.00011ZM12.9783 2.97053L14.8821 5.58828L16.4995 4.41193L14.5957 1.79419L12.9783 2.97053ZM13.5297 -0.521735C12.413 0.290361 12.1662 1.8539 12.9783 2.97053L14.5957 1.79419C14.4333 1.57087 14.4827 1.25816 14.706 1.09574L13.5297 -0.521735ZM9.54653 10.3332C7.96367 12.1017 7 14.4396 7 17.0001H9C9 14.9505 9.76944 13.083 11.0368 11.667L9.54653 10.3332ZM1 12.0001H10.2917V10.0001H1V12.0001ZM3.96736 21.3697L1.98278 10.8153L0.017223 11.1849L2.00181 21.7393L3.96736 21.3697ZM5.93292 23.0001C4.97088 23.0001 4.14514 22.3152 3.96736 21.3697L2.00181 21.7393C2.35737 23.6302 4.00884 25.0001 5.93292 25.0001V23.0001ZM11.3427 23.0001H5.93292V25.0001H11.3427V23.0001ZM7 17.0001C7 20.1419 8.45008 22.9458 10.7136 24.7775L11.9717 23.2227C10.1573 21.7545 9 19.5128 9 17.0001H7ZM17 9C12.5977 9 9 12.5977 9 17H11C11 13.7023 13.7023 11 17 11V9ZM25 17C25 12.5977 21.4023 9 17 9V11C20.2977 11 23 13.7023 23 17H25ZM17 25C21.4023 25 25 21.4023 25 17H23C23 20.2977 20.2977 23 17 23V25ZM9 17C9 21.4023 12.5977 25 17 25V23C13.7023 23 11 20.2977 11 17H9ZM19.1 16.7H17V18.7H19.1V16.7ZM18.8 17C18.8 16.9828 18.8101 16.8907 18.9004 16.8004C18.9907 16.7101 19.0828 16.7 19.1 16.7V18.7C19.5372 18.7 19.9793 18.5499 20.3146 18.2146C20.6499 17.8793 20.8 17.4372 20.8 17H18.8ZM19.1 17.3C19.0828 17.3 18.9907 17.2899 18.9004 17.1996C18.8101 17.1093 18.8 17.0172 18.8 17H20.8C20.8 16.5628 20.6499 16.1207 20.3146 15.7854C19.9793 15.4501 19.5372 15.3 19.1 15.3V17.3ZM17.7 17.3H19.1V15.3H17.7V17.3ZM16.7 13.5V16.3H18.7V13.5H16.7ZM17 13.8C16.9828 13.8 16.8907 13.7899 16.8004 13.6996C16.7101 13.6093 16.7 13.5172 16.7 13.5H18.7C18.7 13.0628 18.5499 12.6207 18.2146 12.2854C17.8793 11.9501 17.4372 11.8 17 11.8V13.8ZM17.3 13.5C17.3 13.5172 17.2899 13.6093 17.1996 13.6996C17.1093 13.7899 17.0172 13.8 17 13.8V11.8C16.5628 11.8 16.1207 11.9501 15.7854 12.2854C15.4501 12.6207 15.3 13.0628 15.3 13.5H17.3ZM17.3 17V13.5H15.3V17H17.3ZM17 16.7C17.0172 16.7 17.1093 16.7101 17.1996 16.8004C17.2899 16.8907 17.3 16.9828 17.3 17H15.3C15.3 17.4372 15.4501 17.8793 15.7854 18.2146C16.1207 18.5499 16.5628 18.7 17 18.7V16.7Z" fill="currentColor" mask="url(#path-1-inside-1_12547_26193)"/>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.00002C0 1.34317 1.34315 2.46763e-05 3 2.46763e-05L11 0V3.00002C11 3.62502 11.487 3.62502 11.75 3.62502C12.9926 3.62502 14 4.46449 14 5.50002C14 6.53556 12.9926 7.37503 11.75 7.37503C11.487 7.37503 11 7.37502 11 8.00002V11H8.96456C8.72194 9.30388 7.26324 8.00002 5.5 8.00002C3.73676 8.00002 2.27806 9.30388 2.03544 11H9.02116e-05L0 3.00002ZM5.50002 10C6.53556 10 7.37503 11.0074 7.37503 12.25C7.37503 12.513 7.37503 13 8.00003 13L11 13L11 15.0354C9.30388 15.2781 8.00003 16.7368 8.00003 18.5C8.00003 20.2632 9.30388 21.7219 11 21.9646V23.9999L3.00002 24C1.34317 24 2.48525e-05 22.6569 2.50697e-05 21L0 13H3.00003C3.62502 13 3.62502 12.513 3.62502 12.25C3.62502 11.0074 4.46449 10 5.50002 10ZM21 24C22.6569 24 24 22.6568 24 21L23.9999 13H21.9646C21.7219 14.6961 20.2632 16 18.5 16C16.7368 16 15.2781 14.6961 15.0354 13H13V16C13 16.625 12.513 16.625 12.25 16.625C11.0074 16.625 10 17.4644 10 18.5C10 19.5355 11.0074 20.375 12.25 20.375C12.513 20.375 13 20.375 13 21L13 24L21 24ZM24 3C24 1.34315 22.6568 0 21 0L13 8.97308e-05V2.03544C14.6961 2.27806 16 3.73676 16 5.5C16 7.26324 14.6961 8.72194 13 8.96455L13 11L16 11C16.625 11 16.625 11.487 16.625 11.75C16.625 12.9926 17.4644 14 18.5 14C19.5355 14 20.375 12.9926 20.375 11.75C20.375 11.487 20.375 11 21 11L24 11L24 3Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.0261C0 5.20987 0.495957 4.47553 1.25309 4.17071L11.2531 0.144709C11.7323 -0.0482365 12.2677 -0.0482363 12.7469 0.144709L22.7469 4.17071C23.504 4.47553 24 5.20987 24 6.02609V23C24 23.5523 23.5523 24 23 24H20V21.5845H4V24H1C0.447716 24 0 23.5523 0 23V6.0261ZM4 17V19H20V17H4ZM4 12V14.5H20V12H4ZM12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3904 3.55059C22.4184 3.84706 23.2289 4.71529 23.5057 5.81647C24.0197 7.82824 23.9999 12.0212 23.9999 12.0212C23.9999 12.0212 23.9999 16.1929 23.5057 18.2047C23.2289 19.3059 22.4184 20.1741 21.3904 20.4706C19.5123 21 11.9999 21 11.9999 21C11.9999 21 4.50739 21 2.60954 20.4494C1.58154 20.1529 0.771002 19.2847 0.494232 18.1835C0 16.1929 0 12 0 12C0 12 0 7.82824 0.494232 5.81647C0.771002 4.71529 1.60131 3.82588 2.60954 3.52941C4.48763 3 11.9999 3 11.9999 3C11.9999 3 19.5123 3 21.3904 3.55059ZM16.5 12L8.5 16.5V7.5L16.5 12Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as l}from"./chunk-
|
|
1
|
+
import{a as l}from"./chunk-YZQVPLSP.js";import{a as d}from"./chunk-OJVJFWT3.js";import{a as n}from"./chunk-7SDGSJ2P.js";import{a as m}from"./chunk-KWTSWXUL.js";import{a as s}from"./chunk-C5HFLPOK.js";import{a as f}from"./chunk-EX6STMCI.js";import{a as p}from"./chunk-IDG5M2QP.js";import{a as u}from"./chunk-6WS7INIM.js";import"./chunk-VNGNBBSS.js";import{a as B}from"./chunk-SI4AOUS5.js";import{a as r}from"./chunk-54XXQVFL.js";import{a}from"./chunk-SRQS24UV.js";import"./chunk-2TVOKUHE.js";import"./chunk-ENFFFE4I.js";import{a as x}from"./chunk-N6FF6F3Y.js";import"./chunk-KQBKSEYJ.js";import{a as t,b as o,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,a as BlButton,x as BlCheckbox,e as BlIcon,l as BlInput,d as BlProgressIndicator,n as BlSelect,m as BlSelectOption,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,o as getIconPath,t as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{a as o,b as r,f as a,g as l,h as t}from"./chunk-HG7OBTQS.js";import{a as i}from"./chunk-NZ3RGSR6.js";var c=o`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color,var(--bl-color-accent-primary-background));--color:var(--bl-badge-color,var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-4xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:0;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color,white);font:var(--font);font-kerning:none;height:var(--height)}:host([size='small']) .badge{--font:var(--bl-font-caption);--height:var(--bl-size-m)}:host([size='large']) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size='small']) bl-icon{display:none}`,n=c;var e=class extends a{constructor(){super(...arguments);this.size="medium"}static get styles(){return[n]}render(){let s=this.icon?r`<bl-icon name=${this.icon}></bl-icon>`:"";return r`<span class="badge">
|
|
2
|
+
<slot name="icon">${s}</slot>
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</span>`}};i([t({type:String,reflect:!0})],e.prototype,"size",2),i([t({type:String})],e.prototype,"icon",2),e=i([l("bl-badge")],e);export{e as a};
|
|
5
|
+
//# sourceMappingURL=chunk-54XXQVFL.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/badge/bl-badge.css", "../src/components/badge/bl-badge.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;max-width:100%}.badge{--bg-color:var(--bl-badge-bg-color,var(--bl-color-accent-primary-background));--color:var(--bl-badge-color,var(--bl-color-primary));--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-4xs);--padding-horizontal:var(--bl-size-3xs);--margin-icon:var(--bl-size-3xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;border:0;border-radius:var(--bl-size-4xs);margin:0;padding:var(--padding-vertical) var(--padding-horizontal);background-color:var(--bg-color);color:var(--color,white);font:var(--font);font-kerning:none;height:var(--height)}:host([size='small']) .badge{--font:var(--bl-font-caption);--height:var(--bl-size-m)}:host([size='large']) .badge{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-2xs);--height:var(--bl-size-2xl);--icon-size:var(--bl-size-m)}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host([size='small']) bl-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport style from './bl-badge.css';\nimport '../icon/bl-icon';\n\nexport type BadgeSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-badge\n * @summary Baklava Badge component\n *\n * @cssproperty --bl-badge-bg-color - Sets the background color of badge. Default value is `--bl-color-accent-primary-background`\n * @cssproperty --bl-badge-color - Sets the color of badge. Default value is `--bl-color-primary`\n */\n\n@customElement('bl-badge')\nexport default class BlBadge extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the badge size\n */\n @property({ type: String, reflect: true })\n size: BadgeSize = 'medium';\n\n /**\n * Sets the name of the icon\n */\n @property({ type: String })\n icon?: string;\n\n render(): TemplateResult {\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n\n return html`<span class=\"badge\">\n <slot name=\"icon\">${icon}</slot>\n <slot></slot>\n </span>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-badge': BlBadge;\n }\n}\n"],
|
|
5
|
+
"mappings": "4GACO,IAAMA,EAASC,glCACfC,EAAQF,ECcf,IAAqBG,EAArB,cAAqCC,CAAW,CAAhD,kCASE,UAAkB,SARlB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAcA,QAAyB,CACvB,IAAMC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GAEvE,OAAOA;AAAA,0BACeD;AAAA;AAAA,YAGxB,CACF,EAhBEE,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBN,EASnB,oBAMAK,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAdPN,EAenB,oBAfmBA,EAArBK,EAAA,CADCE,EAAc,UAAU,GACJP",
|
|
6
|
+
"names": ["styles", "r", "bl_badge_default", "BlBadge", "s", "bl_badge_default", "icon", "$", "__decorateClass", "e", "n"]
|
|
7
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as b}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as i,f as d,g as v,h as n,i as r,j as a,k as h}from"./chunk-HG7OBTQS.js";import{a as l}from"./chunk-NZ3RGSR6.js";var z=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-
|
|
1
|
+
import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as b}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as i,f as d,g as v,h as n,i as r,j as a,k as h}from"./chunk-HG7OBTQS.js";import{a as l}from"./chunk-NZ3RGSR6.js";var z=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`,O=z;var o=class extends d{constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._selectedOptions=[];this._additionalSelectedOptionCount=0;this._isInvalid=!1;this._connectedOptions=[];this._cleanUpPopover=null;this._clickOutsideHandler=e=>{var s;let t=e.composedPath();(s=t==null?void 0:t.find(p=>p.tagName==="BL-SELECT"))!=null&&s.contains(this)||(this.close(),this._checkRequired())}}static get styles(){return[O]}get options(){return this._connectedOptions}get isPopoverOpen(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}get isInvalid(){return this._isInvalid}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._clickOutsideHandler)}close(){this._isPopoverOpen=!1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._clickOutsideHandler)}_setupPopover(){this._cleanUpPopover=g(this._selectInput,this._popover,()=>{x(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[f(),m(8),_({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=i`<ul class="selected-options">
|
|
2
2
|
${this._selectedOptions.map(y=>i`<li>${y.text}</li>`)}
|
|
3
3
|
</ul>`,t=this._additionalSelectedOptionCount?i`<span>+${this._additionalSelectedOptionCount}</span>`:null,s=i`<bl-button
|
|
4
4
|
class="remove-all"
|
|
5
|
-
variant="secondary"
|
|
6
5
|
size="small"
|
|
7
|
-
|
|
6
|
+
variant="tertiary"
|
|
7
|
+
kind="neutral"
|
|
8
8
|
icon="close"
|
|
9
9
|
@click=${this._onClickRemove}></bl-button>`,p=this._showPlaceHolder?i`<span class="placeholder">${this.placeholder}</span>`:"";return i`<div
|
|
10
10
|
class="select-input"
|
|
@@ -32,4 +32,4 @@ import{b as f,c as m,e as _,f as g,g as x}from"./chunk-VNGNBBSS.js";import{a as
|
|
|
32
32
|
>
|
|
33
33
|
${s} ${this.inputTemplate()} ${this.menuTemplate()} ${t} ${e}
|
|
34
34
|
</div> `}get _showPlaceHolder(){return this.label&&!this.labelFixed?!this._selectedOptions.length&&this._isPopoverOpen:!this._selectedOptions.length}_onClickSelectInput(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions)}_handleSingleSelect(e){let t=this._connectedOptions.find(s=>s.value!==e.value&&s.selected);t&&(t.selected=!1),this._selectedOptions=[e],this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(e){let{value:t}=e;e.selected?this._selectedOptions=[...this._selectedOptions,e]:this._selectedOptions=this._selectedOptions.filter(s=>s.value!==t),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.detail;this.multiple?this._handleMultipleSelect(t):this._handleSingleSelect(t)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(t=>t.selected).forEach(t=>{t.selected=!1}),this._selectedOptions=[],this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple)return;let e=0;for(let t of this._selectedOptionsItems)if(t.offsetLeft<this._selectedOptionsContainer.offsetWidth)e++;else break;this._additionalSelectedOptionCount=this._selectedOptionsItems.length-e}_checkRequired(){this.required&&(this._isInvalid=this._selectedOptions.length===0)}updated(e){e.has("_selectedOptions")&&e.get("_selectedOptions")instanceof Array?(this._checkRequired(),this._checkAdditionalItemCount()):e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this._connectedOptions.forEach(t=>{t.multiple=this.multiple,t.selected=!1}),this._selectedOptions=[])}registerOption(e){if(this._connectedOptions.push(e),e.selected){let t={value:e.value,text:e.textContent,selected:e.selected};this.multiple?this._selectedOptions=[...this._selectedOptions,t]:this._selectedOptions=[t],this.requestUpdate()}}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1),this._selectedOptions=this._selectedOptions.filter(t=>t.value!==e.value)}};l([n({})],o.prototype,"label",2),l([n({})],o.prototype,"placeholder",2),l([n({type:String,reflect:!0})],o.prototype,"size",2),l([n({type:Boolean})],o.prototype,"required",2),l([n({type:Boolean})],o.prototype,"disabled",2),l([n({type:Boolean})],o.prototype,"multiple",2),l([n({type:Boolean,attribute:"label-fixed"})],o.prototype,"labelFixed",2),l([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),l([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),l([r()],o.prototype,"_isPopoverOpen",2),l([r()],o.prototype,"_selectedOptions",2),l([r()],o.prototype,"_additionalSelectedOptionCount",2),l([r()],o.prototype,"_isInvalid",2),l([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),l([h(".selected-options li")],o.prototype,"_selectedOptionsItems",2),l([a(".popover")],o.prototype,"_popover",2),l([a(".select-input")],o.prototype,"_selectInput",2),l([u("bl-select")],o.prototype,"_onBlSelect",2),o=l([v("bl-select")],o);export{o as a};
|
|
35
|
-
//# sourceMappingURL=chunk-
|
|
35
|
+
//# sourceMappingURL=chunk-7SDGSJ2P.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n value: string;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({})\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({})\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = 'medium';\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean })\n multiple = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: 'label-fixed' })\n labelFixed = false;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: 'invalid-text' })\n customInvalidText?: string;\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _selectedOptions: ISelectOption[] = [];\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @state()\n private _isInvalid = false;\n\n @query('.selected-options')\n private _selectedOptionsContainer!: HTMLElement;\n\n @queryAll('.selected-options li')\n private _selectedOptionsItems!: Array<HTMLElement>;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n @query('.select-input')\n private _selectInput: HTMLElement;\n\n @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n private _connectedOptions: BlSelectOption[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n get options() {\n return this._connectedOptions;\n }\n\n get isPopoverOpen() {\n return this._isPopoverOpen;\n }\n\n get selectedOptions() {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n get isInvalid() {\n return this._isInvalid;\n }\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener('click', this._clickOutsideHandler);\n }\n\n close() {\n this._isPopoverOpen = false;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._clickOutsideHandler);\n }\n\n private _clickOutsideHandler = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n this.close();\n this._checkRequired();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: 'bottom',\n strategy: 'fixed',\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareArguments) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty('--left', `${x}px`);\n this._popover.style.setProperty('--top', `${y}px`);\n });\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n </ul>`;\n const _selectedItemCount = this._additionalSelectedOptionCount\n ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n : null;\n const removeButton = html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}></bl-button>`;\n const placeholder = this._showPlaceHolder\n ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n : '';\n\n return html`<div\n class=\"select-input\"\n ?disabled=${this.disabled}\n @click=${this._onClickSelectInput}\n >\n ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n <div class=\"actions\">\n ${removeButton}\n <bl-icon\n class=\"dropdown-icon open\"\n name=\"arrow_up\"\n ></bl-icon>\n\n <bl-icon\n class=\"dropdown-icon closed\"\n name=\"arrow_down\"\n ></bl-icon>\n </div>\n </div>`;\n }\n\n private menuTemplate() {\n return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n <slot></slot>\n </div>`;\n }\n\n render() {\n const invalidMessage = this._isInvalid && this.customInvalidText\n ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n const helpMessage = this.helpText && !invalidMessage\n ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n const label = this.label\n ? html`<label>${this.label}</label>` : '';\n\n return html`<div\n class=${classMap({\n 'select-wrapper': true,\n 'select-open': this._isPopoverOpen,\n 'selected': this._selectedOptions.length > 0,\n 'invalid': this._isInvalid,\n })}\n tabindex=\"-1\"\n >\n ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n </div> `;\n }\n\n private get _showPlaceHolder() {\n if (this.label && !this.labelFixed) {\n return !this._selectedOptions.length && this._isPopoverOpen;\n }\n return !this._selectedOptions.length;\n }\n\n private _onClickSelectInput() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(this._selectedOptions);\n }\n\n private _handleSingleSelect(optionItem: ISelectOption) {\n const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n if (oldItem) {\n oldItem.selected = false;\n }\n\n this._selectedOptions = [optionItem];\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect(optionItem: ISelectOption) {\n const { value } = optionItem;\n\n if (!optionItem.selected) {\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n } else {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n }\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.detail as ISelectOption;\n\n if (this.multiple) {\n this._handleMultipleSelect(optionItem);\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n this._connectedOptions\n .filter(option => option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this._selectedOptions = [];\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple) return;\n\n let visibleItems = 0;\n for(const value of this._selectedOptionsItems) {\n if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n visibleItems++;\n } else {\n break;\n }\n }\n\n this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n }\n\n private _checkRequired() {\n if (this.required) {\n this._isInvalid = this._selectedOptions.length === 0;\n }\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has('_selectedOptions') &&\n _changedProperties.get('_selectedOptions') instanceof Array\n ) {\n this._checkRequired();\n this._checkAdditionalItemCount();\n } else if (\n _changedProperties.has('multiple') &&\n typeof _changedProperties.get('multiple') === 'boolean'\n ) {\n this._connectedOptions.forEach(option => {\n option.multiple = this.multiple;\n option.selected = false;\n });\n this._selectedOptions = [];\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n const optionItem = {\n value: option.value,\n text: option.textContent,\n selected: option.selected,\n } as ISelectOption;\n\n if (this.multiple) {\n this._selectedOptions = [...this._selectedOptions, optionItem];\n } else {\n this._selectedOptions = [optionItem];\n }\n\n this.requestUpdate();\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-select': BlSelect;\n }\n}\n"],
|
|
5
|
+
"mappings": "qRACO,IAAMA,EAASC,81IACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCAsBE,UAAmB,SAMnB,cAAW,GAMX,cAAW,GAMX,cAAW,GAMX,gBAAa,GAgBb,KAAQ,eAAiB,GAGzB,KAAQ,iBAAoC,CAAC,EAG7C,KAAQ,+BAAiC,EAGzC,KAAQ,WAAa,GAgBrB,KAAQ,kBAAsC,CAAC,EAE/C,KAAQ,gBAA0C,KAkClD,KAAQ,qBAAwBC,GAAsB,CAhJxD,IAAAC,EAiJI,IAAMC,EAAYF,EAAM,aAAa,GAEhCC,EAAAC,GAAA,YAAAA,EAAW,KAAKC,GAAMA,EAAG,UAAY,eAArC,MAAAF,EAAmD,SAAS,QAC/D,KAAK,MAAM,EACX,KAAK,eAAe,EAExB,EAjIA,WAAW,QAAyB,CAClC,MAAO,CAACG,CAAK,CACf,CAwFA,IAAI,SAAU,CACZ,OAAO,KAAK,iBACd,CAEA,IAAI,eAAgB,CAClB,OAAO,KAAK,cACd,CAEA,IAAI,iBAAkB,CACpB,OAAO,KAAK,gBACd,CAEA,IAAI,+BAAgC,CAClC,OAAO,KAAK,8BACd,CAEA,IAAI,WAAY,CACd,OAAO,KAAK,UACd,CAEA,MAAO,CACL,KAAK,eAAiB,GACtB,KAAK,cAAc,EACnB,SAAS,iBAAiB,QAAS,KAAK,oBAAoB,CAC9D,CAEA,OAAQ,CACN,KAAK,eAAiB,GACtB,KAAK,iBAAmB,KAAK,gBAAgB,EAC7C,SAAS,oBAAoB,QAAS,KAAK,oBAAoB,CACjE,CAWQ,eAAgB,CACtB,KAAK,gBAAkBC,EAAW,KAAK,aAAc,KAAK,SAAU,IAAM,CACxEC,EAAgB,KAAK,aAAc,KAAK,SAAU,CAChD,UAAW,SACX,SAAU,QACV,WAAY,CACVC,EAAK,EACLC,EAAO,CAAC,EACRC,EAAK,CACH,MAAMC,EAA2B,CAC/B,OAAO,OAAOA,EAAK,SAAS,SAAS,MAAO,CAC1C,MAAO,GAAGA,EAAK,SAAS,UAAU,sBAAsB,EAAE,SAC5D,CAAC,CACH,CACF,CAAC,CACH,CACF,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAC,EAAG,EAAAC,CAAE,IAAM,CACpB,KAAK,SAAS,MAAM,YAAY,SAAU,GAAGD,KAAK,EAClD,KAAK,SAAS,MAAM,YAAY,QAAS,GAAGC,KAAK,CACnD,CAAC,CACH,CAAC,CACH,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,CAC1B,CACA,sBAAuB,CACrB,MAAM,qBAAqB,EAE3B,KAAK,iBAAmB,KAAK,gBAAgB,CAC/C,CAEQ,eAAgB,CACtB,IAAMC,EAAuBC;AAAA,QACzB,KAAK,iBAAiB,IAAIC,GAAQD,QAAWC,EAAK,WAAW;AAAA,WAE3DC,EAAqB,KAAK,+BAC5BF,WAAc,KAAK,wCACnB,KACEG,EAAeH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMR,KAAK,8BACZI,EAAc,KAAK,iBACrBJ,8BAAiC,KAAK,qBACtC,GAEJ,OAAOA;AAAA;AAAA,kBAEO,KAAK;AAAA,eACR,KAAK;AAAA;AAAA,QAEZI,KAAeL,KAAwBG;AAAA;AAAA,UAErCC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYR,CAEQ,cAAe,CACrB,OAAOH,2CAA8C,KAAK;AAAA;AAAA,WAG5D,CAEA,QAAS,CACP,IAAMK,EAAiB,KAAK,YAAc,KAAK,kBAC3CL,4BAA+B,KAAK,wBAA0B,GAC5DM,EAAc,KAAK,UAAY,CAACD,EAClCL,yBAA4B,KAAK,eAAiB,GAChDO,EAAQ,KAAK,MACfP,WAAc,KAAK,gBAAkB,GAEzC,OAAOA;AAAA,cACGQ,EAAS,CACjB,iBAAkB,GAClB,cAAe,KAAK,eACpB,SAAY,KAAK,iBAAiB,OAAS,EAC3C,QAAW,KAAK,UAClB,CAAC;AAAA;AAAA;AAAA,QAGGD,KAAS,KAAK,cAAc,KAAK,KAAK,aAAa,KAAKD,KAAeD;AAAA,YAE7E,CAEA,IAAY,kBAAmB,CAC7B,OAAI,KAAK,OAAS,CAAC,KAAK,WACf,CAAC,KAAK,iBAAiB,QAAU,KAAK,eAExC,CAAC,KAAK,iBAAiB,MAChC,CAEQ,qBAAsB,CAC5B,KAAK,eAAiB,KAAK,MAAM,EAAI,KAAK,KAAK,CACjD,CAEQ,oBAAqB,CAC3B,KAAK,YAAY,KAAK,gBAAgB,CACxC,CAEQ,oBAAoBI,EAA2B,CACrD,IAAMC,EAAU,KAAK,kBAAkB,KAAKC,GAAUA,EAAO,QAAUF,EAAW,OAASE,EAAO,QAAQ,EAEtGD,IACFA,EAAQ,SAAW,IAGrB,KAAK,iBAAmB,CAACD,CAAU,EACnC,KAAK,mBAAmB,EACxB,KAAK,eAAiB,EACxB,CAEQ,sBAAsBA,EAA2B,CACvD,GAAM,CAAE,MAAAG,CAAM,EAAIH,EAEbA,EAAW,SAGd,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkBA,CAAU,EAF7D,KAAK,iBAAmB,KAAK,iBAAiB,OAAOR,GAAQA,EAAK,QAAUW,CAAK,EAKnF,KAAK,mBAAmB,CAC1B,CAEQ,yBAAyB,EAAgB,CAC/C,IAAMH,EAAa,EAAE,OAEjB,KAAK,SACP,KAAK,sBAAsBA,CAAU,EAErC,KAAK,oBAAoBA,CAAU,CAEvC,CAEQ,eAAe,EAAe,CACpC,EAAE,gBAAgB,EAElB,KAAK,kBACF,OAAOE,GAAUA,EAAO,QAAQ,EAChC,QAAQA,GAAU,CACjBA,EAAO,SAAW,EACpB,CAAC,EAEH,KAAK,iBAAmB,CAAC,EACzB,KAAK,mBAAmB,CAC1B,CAEQ,2BAA4B,CAClC,GAAI,CAAC,KAAK,SAAU,OAEpB,IAAIE,EAAe,EACnB,QAAUD,KAAS,KAAK,sBACtB,GAAIA,EAAM,WAAa,KAAK,0BAA0B,YACpDC,QAEA,OAIJ,KAAK,+BAAiC,KAAK,sBAAsB,OAASA,CAC5E,CAEQ,gBAAiB,CACnB,KAAK,WACP,KAAK,WAAa,KAAK,iBAAiB,SAAW,EAEvD,CAEU,QAAQC,EAAoC,CAElDA,EAAmB,IAAI,kBAAkB,GACzCA,EAAmB,IAAI,kBAAkB,YAAa,OAEtD,KAAK,eAAe,EACpB,KAAK,0BAA0B,GAE/BA,EAAmB,IAAI,UAAU,GACjC,OAAOA,EAAmB,IAAI,UAAU,GAAM,YAE9C,KAAK,kBAAkB,QAAQH,GAAU,CACvCA,EAAO,SAAW,KAAK,SACvBA,EAAO,SAAW,EACpB,CAAC,EACD,KAAK,iBAAmB,CAAC,EAE7B,CAMA,eAAeA,EAAwB,CAGrC,GAFA,KAAK,kBAAkB,KAAKA,CAAM,EAE9BA,EAAO,SAAU,CACnB,IAAMF,EAAa,CACjB,MAAOE,EAAO,MACd,KAAMA,EAAO,YACb,SAAUA,EAAO,QACnB,EAEI,KAAK,SACP,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkBF,CAAU,EAE7D,KAAK,iBAAmB,CAACA,CAAU,EAGrC,KAAK,cAAc,CACrB,CACF,CAMA,iBAAiBE,EAAwB,CACvC,KAAK,kBAAkB,OAAO,KAAK,kBAAkB,QAAQA,CAAM,EAAG,CAAC,EACvE,KAAK,iBAAmB,KAAK,iBAAiB,OAAOV,GAAQA,EAAK,QAAUU,EAAO,KAAK,CAC1F,CACF,EAlWEI,EAAA,CADCC,EAAS,CAAC,CAAC,GATOhC,EAUnB,qBAMA+B,EAAA,CADCC,EAAS,CAAC,CAAC,GAfOhC,EAgBnB,2BAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GArBtBhC,EAsBnB,oBAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GA3BRhC,EA4BnB,wBAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GAjCRhC,EAkCnB,wBAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,CAAC,GAvCRhC,EAwCnB,wBAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,UAAW,aAAc,CAAC,GA7ClChC,EA8CnB,0BAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GAnD/BhC,EAoDnB,wBAMA+B,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,CAAC,GAzDlChC,EA0DnB,iCAIQ+B,EAAA,CADPE,EAAM,GA7DYjC,EA8DX,8BAGA+B,EAAA,CADPE,EAAM,GAhEYjC,EAiEX,gCAGA+B,EAAA,CADPE,EAAM,GAnEYjC,EAoEX,8CAGA+B,EAAA,CADPE,EAAM,GAtEYjC,EAuEX,0BAGA+B,EAAA,CADPG,EAAM,mBAAmB,GAzEPlC,EA0EX,yCAGA+B,EAAA,CADPC,EAAS,sBAAsB,GA5EbhC,EA6EX,qCAGA+B,EAAA,CADPG,EAAM,UAAU,GA/EElC,EAgFX,wBAGA+B,EAAA,CADPG,EAAM,eAAe,GAlFHlC,EAmFX,4BAEoB+B,EAAA,CAA3B7B,EAAM,WAAW,GArFCF,EAqFS,2BArFTA,EAArB+B,EAAA,CADCI,EAAc,WAAW,GACLnC",
|
|
6
|
+
"names": ["styles", "r", "bl_select_default", "BlSelect", "s", "event", "_a", "eventPath", "el", "bl_select_default", "N", "z", "b", "T", "k", "args", "x", "y", "inputSelectedOptions", "$", "item", "_selectedItemCount", "removeButton", "placeholder", "invalidMessage", "helpMessage", "label", "o", "optionItem", "oldItem", "option", "value", "visibleItems", "_changedProperties", "__decorateClass", "e", "t", "i", "n"]
|
|
7
|
+
}
|
|
@@ -3,8 +3,8 @@ import{a as s}from"./chunk-23UFIOHV.js";import{a as l,b as r,f as a,g as n,h as
|
|
|
3
3
|
<bl-button
|
|
4
4
|
slot="tooltip-trigger"
|
|
5
5
|
icon="info"
|
|
6
|
-
variant="
|
|
7
|
-
kind="
|
|
6
|
+
variant="tertiary"
|
|
7
|
+
kind="neutral"
|
|
8
8
|
label="${this.helpText}"
|
|
9
9
|
></bl-button>
|
|
10
10
|
${this.helpText}
|
|
@@ -27,4 +27,4 @@ import{a as s}from"./chunk-23UFIOHV.js";import{a as l,b as r,f as a,g as n,h as
|
|
|
27
27
|
${b}
|
|
28
28
|
</button>
|
|
29
29
|
`}};e([o({type:String})],t.prototype,"caption",2),e([o({type:String,reflect:!0})],t.prototype,"name",2),e([o({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:Boolean,reflect:!0})],t.prototype,"notify",2),e([o({type:String})],t.prototype,"badge",2),e([o({type:Boolean,reflect:!0})],t.prototype,"selected",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-tab-selected")],t.prototype,"_onSelect",2),t=e([n("bl-tab")],t);export{t as a};
|
|
30
|
-
//# sourceMappingURL=chunk-
|
|
30
|
+
//# sourceMappingURL=chunk-EX6STMCI.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/components/tab-group/tab/bl-tab.css", "../src/components/tab-group/tab/bl-tab.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover,:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\n\nimport style from './bl-tab.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab\n * @summary Baklava Tab component\n */\n@customElement('bl-tab')\nexport default class BlTab extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private tabGroup: BlTabGroup | null;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this.tabGroup = this.closest<BlTabGroup>('bl-tab-group');\n // FIXME: We need to warn if parent is not tab-group\n this.tabGroup?.registerTab(this);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.tabGroup?.unregisterTab(this);\n }\n\n /**\n * Sets the caption of tab\n */\n @property({ type: String })\n caption: string;\n\n /**\n * Name of the tab that should match `tab-panel`'s `tab` attribute\n */\n @property({ type: String, reflect: true })\n name: string;\n\n /**\n * Set tooltip text. Should be set to display information icon.\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText: string;\n\n /**\n * Name of the icon which display on the left side of the tab.\n */\n @property({ type: String })\n icon = '';\n\n /**\n * Shows notification dot.\n */\n @property({ type: Boolean, reflect: true })\n notify = false;\n\n /**\n * Sets the content of the badge.\n */\n @property({ type: String })\n badge = '';\n\n /**\n * Set `tab` as selected.\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Set `tab` as disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when tab is selected.\n */\n @event('bl-tab-selected') private _onSelect: EventDispatcher<string>;\n\n /**\n * Set tab selected.\n */\n select() {\n this._onSelect(this.name);\n }\n\n render(): TemplateResult {\n const title = html` <slot></slot>`;\n\n const helpTooltip = this.helpText\n ? html` <div class=\"help-container\">\n <bl-tooltip>\n <bl-button\n slot=\"tooltip-trigger\"\n icon=\"info\"\n variant=\"
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:flex;align-items:center;background-color:var(--bl-color-primary-background)}.container{--title-padding-vertical:var(--bl-size-m);--title-padding-horizontal:var(--bl-size-xl);--title-color:var(--bl-color-secondary);--caption-color:var(--bl-color-secondary);--icon-color:var(--bl-color-secondary);--border-bottom-width:var(--bl-size-4xs);--border-left-space:var(--bl-size-xl);--font-title:var(--bl-font-title-3-medium);--font-caption:var(--bl-font-title-4-regular);--tab-right-padding:var(--bl-size-xl);--help-container-width:var(--bl-size-2xl);--tab-height:calc(var(--bl-size-3xl) + var(--bl-size-s));display:flex;border:0;cursor:pointer;background-color:initial;width:max-content;height:var(--tab-height);padding:0 var(--tab-right-padding)}.container::after{position:absolute;content:'';right:0;top:var(--bl-size-m);height:calc(100% - var(--bl-size-2xl));border-right:1px solid var(--bl-color-tertiary-hover)}:host(:last-of-type) .container::after{border-right:0}:host .container::before{content:'';position:absolute;opacity:0;bottom:calc(-1 * var(--bl-size-4xs));left:var(--border-left-space);width:calc(100% - var(--bl-size-4xl));border-bottom:var(--border-bottom-width) solid var(--bl-color-primary)}:host([selected]:not([disabled])) .container::before{opacity:1}:host(:hover) .container,:host([selected]) .container,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .container,:host([selected]) .container{--title-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}:host([disabled]) .container{cursor:not-allowed;--title-color:var(--bl-color-content-passive);--caption-color:var(--bl-color-content-passive);--icon-color:var(--bl-color-content-passive)}:host(:hover) :where(.title,.icon),:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) :where(.title,.icon){transition:color 120ms ease-out}:host([selected]) .border-bottom{display:inline-block}:host([disabled]) .container:hover,:host([disabled]) .container.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{cursor:not-allowed}:host([help-text]) button{padding-right:0}.tab-button{width:max-content}.help-container{display:flex;justify-content:center;align-items:center;width:var(--help-container-width);height:100%;font-size:var(--bl-font-size-m);pointer-events:visible;padding-right:var(--tab-right-padding)}bl-tooltip{--bl-tooltip-position:fixed}.title{display:flex;align-items:center;justify-content:center;font:var(--font-title);color:var(--title-color);line-height:var(--bl-size-m);white-space:nowrap}.title-container{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.badge-container{padding-left:var(--bl-size-3xs);display:flex;margin-bottom:1px}.caption{font:var(--font-caption);line-height:var(--bl-size-xs);color:var(--caption-color);text-align:center;margin-top:var(--bl-size-4xs)}.icon{display:flex;color:var(--icon-color);font-size:var(--bl-font-size-l);margin-right:var(--bl-size-3xs);margin-bottom:1px}:host([notify]) .title::after{content:'';height:var(--bl-size-2xs);width:var(--bl-size-2xs);border-radius:var(--bl-size-3xs);margin-left:var(--bl-size-3xs);background-color:var(--bl-color-danger);margin-bottom:1px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\n\nimport style from './bl-tab.css';\nimport type BlTabGroup from '../bl-tab-group';\n\n/**\n * @tag bl-tab\n * @summary Baklava Tab component\n */\n@customElement('bl-tab')\nexport default class BlTab extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private tabGroup: BlTabGroup | null;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this.tabGroup = this.closest<BlTabGroup>('bl-tab-group');\n // FIXME: We need to warn if parent is not tab-group\n this.tabGroup?.registerTab(this);\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.tabGroup?.unregisterTab(this);\n }\n\n /**\n * Sets the caption of tab\n */\n @property({ type: String })\n caption: string;\n\n /**\n * Name of the tab that should match `tab-panel`'s `tab` attribute\n */\n @property({ type: String, reflect: true })\n name: string;\n\n /**\n * Set tooltip text. Should be set to display information icon.\n */\n @property({ type: String, attribute: 'help-text', reflect: true })\n helpText: string;\n\n /**\n * Name of the icon which display on the left side of the tab.\n */\n @property({ type: String })\n icon = '';\n\n /**\n * Shows notification dot.\n */\n @property({ type: Boolean, reflect: true })\n notify = false;\n\n /**\n * Sets the content of the badge.\n */\n @property({ type: String })\n badge = '';\n\n /**\n * Set `tab` as selected.\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * Set `tab` as disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when tab is selected.\n */\n @event('bl-tab-selected') private _onSelect: EventDispatcher<string>;\n\n /**\n * Set tab selected.\n */\n select() {\n this._onSelect(this.name);\n }\n\n render(): TemplateResult {\n const title = html` <slot></slot>`;\n\n const helpTooltip = this.helpText\n ? html` <div class=\"help-container\">\n <bl-tooltip>\n <bl-button\n slot=\"tooltip-trigger\"\n icon=\"info\"\n variant=\"tertiary\"\n kind=\"neutral\"\n label=\"${this.helpText}\"\n ></bl-button>\n ${this.helpText}\n </bl-tooltip>\n </div>`\n : null;\n\n const icon = this.icon\n ? html` <div class=\"icon\">\n <bl-icon name=\"${this.icon}\"></bl-icon>\n </div>`\n : null;\n\n const badge = this.badge\n ? html` <div class=\"badge-container\">\n <bl-badge size=\"small\">${this.badge}</bl-badge>\n </div>`\n : null;\n\n const caption = this.caption ? html` <div class=\"caption\">${this.caption}</div>` : null;\n\n return html`\n <button\n ?disabled=\"${this.disabled}\"\n role=\"tab\"\n class=\"container\"\n @click=\"${() => this.select()}\"\n >\n <div class=\"title-container\">\n <div class=\"title\">${icon} ${title} ${badge}</div>\n ${caption}\n </div>\n ${helpTooltip}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-tab': BlTab;\n }\n}\n"],
|
|
5
5
|
"mappings": "oJACO,IAAMA,EAASC,omGACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAmCC,CAAW,CAA9C,kCA4CE,UAAO,GAMP,YAAS,GAMT,WAAQ,GAMR,cAAW,GAMX,cAAW,GAnEX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAIA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CAtBnC,IAAAC,EAuBM,KAAK,SAAW,KAAK,QAAoB,cAAc,GAEvDA,EAAA,KAAK,WAAL,MAAAA,EAAe,YAAY,KAC7B,CAAC,CACH,CAEA,sBAAuB,CA7BzB,IAAAA,EA8BI,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,cAAc,KAC/B,CA0DA,QAAS,CACP,KAAK,UAAU,KAAK,IAAI,CAC1B,CAEA,QAAyB,CACvB,IAAMC,EAAQC,kBAERC,EAAc,KAAK,SACrBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAOe,KAAK;AAAA;AAAA,cAEd,KAAK;AAAA;AAAA,gBAGX,KAEEE,EAAO,KAAK,KACdF;AAAA,2BACmB,KAAK;AAAA,gBAExB,KAEEG,EAAQ,KAAK,MACfH;AAAA,mCAC2B,KAAK;AAAA,gBAEhC,KAEEI,EAAU,KAAK,QAAUJ,0BAA6B,KAAK,gBAAkB,KAEnF,OAAOA;AAAA;AAAA,qBAEU,KAAK;AAAA;AAAA;AAAA,kBAGR,IAAM,KAAK,OAAO;AAAA;AAAA;AAAA,+BAGLE,KAAQH,KAASI;AAAA,YACpCC;AAAA;AAAA,UAEFH;AAAA;AAAA,KAGR,CACF,EAvGEI,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAzBPX,EA0BnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA/BtBX,EAgCnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,UAAW,YAAa,QAAS,EAAK,CAAC,GArC9CX,EAsCnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA3CPX,EA4CnB,oBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjDvBX,EAkDnB,sBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAvDPX,EAwDnB,qBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7DvBX,EA8DnB,wBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAnEvBX,EAoEnB,wBAKkCU,EAAA,CAAjCE,EAAM,iBAAiB,GAzELZ,EAyEe,yBAzEfA,EAArBU,EAAA,CADC,EAAc,QAAQ,GACFV",
|
|
6
6
|
"names": ["styles", "r", "bl_tab_default", "BlTab", "s", "bl_tab_default", "_a", "title", "$", "helpTooltip", "icon", "badge", "caption", "__decorateClass", "e", "event"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import{a as b}from"./chunk-2TVOKUHE.js";import{a as m}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as p,g as d,h as o}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var h=c`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,f=h;var g=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends p{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(!!this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(i){i.target.assignedElements().forEach(e=>{var s;if(e.tagName!=="BL-BUTTON"){(s=e.parentNode)==null||s.removeChild(e);return}e.setAttribute("variant","tertiary"),e.setAttribute("kind","neutral"),e.setAttribute("size","medium"),e.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
|
|
2
|
+
<slot name="caption"> ${this.caption} </slot>
|
|
3
|
+
</span>`:null,l=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,e=m({close:!0,"close-spaced":!!i}),s=this.closable?n`<bl-button
|
|
4
|
+
class=${e}
|
|
5
|
+
label="close"
|
|
6
|
+
variant="tertiary"
|
|
7
|
+
kind="neutral"
|
|
8
|
+
icon="close"
|
|
9
|
+
variant="secondary"
|
|
10
|
+
@click=${this._closeHandler}
|
|
11
|
+
></bl-button>`:null,v=n`<span class="description">
|
|
12
|
+
<slot> ${this.description} </slot>
|
|
13
|
+
</span>`;return n`
|
|
14
|
+
<div class="alert">
|
|
15
|
+
<div class="wrapper">
|
|
16
|
+
<div class="content">
|
|
17
|
+
${l}
|
|
18
|
+
<div class="text-content">${i} ${v}</div>
|
|
19
|
+
</div>
|
|
20
|
+
<slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
|
|
21
|
+
</div>
|
|
22
|
+
${s}
|
|
23
|
+
</div>
|
|
24
|
+
`}};r([o({reflect:!0})],t.prototype,"variant",2),r([o()],t.prototype,"description",2),r([o({converter:g()})],t.prototype,"icon",2),r([o({type:Boolean,reflect:!0})],t.prototype,"closable",2),r([o()],t.prototype,"caption",2),r([o({type:Boolean,reflect:!0})],t.prototype,"closed",2),r([u("bl-close")],t.prototype,"onClose",2),t=r([d("bl-alert")],t);export{t as a};
|
|
25
|
+
//# sourceMappingURL=chunk-SI4AOUS5.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/alert/bl-alert.css", "../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-body-text-3)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n return {\n fromAttribute: (value: string): string | boolean => {\n if (!value || value === 'true') return true;\n if (value === 'false') return false;\n return value;\n },\n };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets alert variant\n */\n @property({ reflect: true })\n variant: AlertVariant = 'info';\n\n /**\n * Sets alert description\n */\n @property()\n description?: 'string';\n\n /**\n * Allows to customize alert icon\n */\n @property({ converter: stringBooleanConverter() })\n icon?: boolean | string;\n\n /**\n * Displays a close button.\n */\n @property({ type: Boolean, reflect: true })\n closable = false;\n\n /**\n * Sets alert caption.\n */\n @property()\n caption?: string;\n\n /**\n * Sets alert components display state.\n */\n @property({ type: Boolean, reflect: true })\n closed = false;\n\n /**\n * Opens alert component.\n */\n public open() {\n this.closed = false;\n }\n\n /**\n * Closes alert component.\n */\n public close() {\n this.closed = true;\n }\n\n /**\n * Fires when close button clicked.\n */\n @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n private get _hasAlertCaptionSlot() {\n return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n }\n\n private _closeHandler() {\n this.closed = true;\n this.onClose(true);\n }\n\n private _predefinedIcons() {\n switch (this.variant) {\n case 'success':\n return 'check_fill';\n case 'danger':\n return 'close_fill';\n default:\n return this.variant;\n }\n }\n\n private _getIcon(): string | undefined {\n if (!this.icon) return;\n if (this.icon === true) return this._predefinedIcons();\n return this.icon;\n }\n\n private _initAlertActionSlot(event: Event) {\n const slotElements = (event.target as HTMLSlotElement).assignedElements();\n slotElements.forEach(element => {\n if (element.tagName !== 'BL-BUTTON') {\n element.parentNode?.removeChild(element);\n return;\n }\n element.setAttribute('variant','tertiary' as ButtonVariant);\n element.setAttribute('kind', 'neutral' as ButtonKind);\n element.setAttribute('size', 'medium' as ButtonSize);\n element.removeAttribute('icon');\n });\n }\n\n render(): TemplateResult {\n const caption =\n this.caption || this._hasAlertCaptionSlot\n ? html`<span class=\"caption\">\n <slot name=\"caption\"> ${this.caption} </slot>\n </span>`\n : null;\n const icon = this._getIcon()\n ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n : null;\n\n const closeClasses = classMap({\n 'close': true,\n 'close-spaced': !!caption,\n });\n\n const closable = this.closable\n ? html`<bl-button\n class=${closeClasses}\n label=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n variant=\"secondary\"\n @click=${this._closeHandler}\n ></bl-button>`\n : null;\n const description = html`<span class=\"description\">\n <slot> ${this.description} </slot>\n </span>`;\n\n return html`\n <div class=\"alert\">\n <div class=\"wrapper\">\n <div class=\"content\">\n ${icon}\n <div class=\"text-content\">${caption} ${description}</div>\n </div>\n <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n </div>\n ${closable}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-alert': BlAlert;\n }\n}\n"],
|
|
5
|
+
"mappings": "oOACO,IAAMA,EAASC,27CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCSF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,aACN,UACH,MAAO,iBACJ,SACH,MAAO,qBAEP,OAAO,KAAK,QAElB,CAEQ,UAA+B,CACrC,GAAI,EAAC,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACnBA,EAAM,OAA2B,iBAAiB,EAC3D,QAAQC,GAAW,CA1GpC,IAAAC,EA2GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,MACF,CACAA,EAAQ,aAAa,UAAU,UAA2B,EAC1DA,EAAQ,aAAa,OAAQ,SAAuB,EACpDA,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAME,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAeC,EAAS,CAC5B,MAAS,GACT,eAAgB,CAAC,CAACL,CACpB,CAAC,EAEKM,EAAW,KAAK,SAClBL;AAAA,kBACUG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMC,KAAK;AAAA,uBAEhB,KACEG,EAAcN;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA;AAAA;AAAA,cAIGC;AAAA,wCAC0BF,KAAWO;AAAA;AAAA,2DAEQ,KAAK;AAAA;AAAA,UAEtDD;AAAA;AAAA,KAGR,CACF,EAvIEE,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAc,EAAA,CADCC,EAAS,GAdSf,EAenB,2BAMAc,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAc,EAAA,CADCC,EAAS,GAhCSf,EAiCnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Bc,EAAA,CAA1BX,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBc,EAAA,CADCG,EAAc,UAAU,GACJjB",
|
|
6
|
+
"names": ["styles", "r", "bl_alert_default", "stringBooleanConverter", "value", "BlAlert", "s", "bl_alert_default", "event", "element", "_a", "caption", "$", "icon", "l", "closeClasses", "o", "closable", "description", "__decorateClass", "e", "stringBooleanConverter", "n"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import{a}from"./chunk-2TVOKUHE.js";import{a as v}from"./chunk-ENFFFE4I.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as c,b as l,f as d,g as b,h as t}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=c`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-primary-background);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}`,p=m;var o=class extends d{constructor(){super(...arguments);this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.target="_self"}static get styles(){return[p]}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}get _hasDefaultSlot(){return[...this.childNodes].some(e=>{var n;let i=e.nodeType;return i===e.TEXT_NODE&&((n=e.textContent)==null?void 0:n.trim())!==""||i===e.ELEMENT_NODE&&!e.hasAttribute("slot")})}render(){let s=!!this.href,e=this.icon?l`<bl-icon name=${this.icon}></bl-icon>`:"",i=l`<slot name="icon">${e}</slot> <span class="label"><slot></slot></span>`,n=v({button:!0,"has-icon":this.icon||this._hasIconSlot,"has-content":this._hasDefaultSlot});return s?l`<a
|
|
2
|
+
class=${n}
|
|
3
|
+
aria-disabled="${a(this.disabled)}"
|
|
4
|
+
aria-label="${a(this.label)}"
|
|
5
|
+
href=${a(this.href)}
|
|
6
|
+
target=${a(this.target)}
|
|
7
|
+
role="button"
|
|
8
|
+
>${i}</a
|
|
9
|
+
>`:l`<button
|
|
10
|
+
class=${n}
|
|
11
|
+
aria-disabled="${a(this.disabled)}"
|
|
12
|
+
aria-label="${a(this.label)}"
|
|
13
|
+
?disabled=${this.disabled}
|
|
14
|
+
@click="${this._handleClick}"
|
|
15
|
+
>
|
|
16
|
+
${i}
|
|
17
|
+
</button>`}_handleClick(){this.onClick("Click event fired!")}};r([t({type:String,reflect:!0})],o.prototype,"variant",2),r([t({type:String,reflect:!0})],o.prototype,"kind",2),r([t({type:String,reflect:!0})],o.prototype,"size",2),r([t({type:String})],o.prototype,"label",2),r([t({type:Boolean,reflect:!0})],o.prototype,"disabled",2),r([t({type:String})],o.prototype,"href",2),r([t({type:String})],o.prototype,"icon",2),r([t({type:String})],o.prototype,"target",2),r([t({type:String})],o.prototype,"type",2),r([h("bl-click")],o.prototype,"onClick",2),o=r([b("bl-button")],o);export{o as a};
|
|
18
|
+
//# sourceMappingURL=chunk-SRQS24UV.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/button/bl-button.css", "../src/components/button/bl-button.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:var(--bl-button-display,inline-block);max-width:100%;position:relative}.button{--main-color:var(--bl-color-primary);--main-hover-color:var(--bl-color-primary-hover);--text-hover-color:var(--bl-color-secondary-background);--content-color:var(--bl-color-primary-background);--bg-color:var(--main-color);--border-color:var(--main-color);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-m);--margin-icon:var(--padding-vertical);--icon-size:var(--bl-size-m);--font:var(--bl-font-title-3-medium);--height:var(--bl-size-2xl);display:flex;gap:var(--margin-icon);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);border:solid 1px var(--border-color);border-radius:6px;text-decoration:none;padding:var(--padding-vertical) var(--padding-horizontal);cursor:pointer;background-color:var(--bg-color);color:var(--content-color);font:var(--font);font-kerning:none;user-select:none}:host(:hover) .button,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .button{--bg-color:var(--main-hover-color);--border-color:var(--main-hover-color)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([size='small']) .button{--font:var(--bl-font-title-4-medium);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-2xs);--icon-size:var(--bl-size-s);--height:var(--bl-size-xl)}:host([size='large']) .button{--font:var(--bl-font-title-3-medium);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-xl);--margin-icon:var(--bl-size-2xs);--height:var(--bl-size-3xl)}.button:focus{outline:0}:host ::slotted(bl-icon){font-size:var(--icon-size)}:host .has-icon:not(.has-content){--padding-horizontal:var(--padding-vertical);--margin-icon:0}:host([variant='secondary']) .button{--bg-color:transparent;--content-color:var(--main-color)}:host([variant='tertiary']) .button{--content-color:var(--main-color);--border-color:transparent;--bg-color:transparent}:host([kind='neutral']) .button{--main-color:var(--bl-color-secondary);--main-hover-color:var(--bl-color-secondary-hover)}:host([kind='success']) .button{--main-color:var(--bl-color-success);--main-hover-color:var(--bl-color-success-hover)}:host([kind='danger']) .button{--main-color:var(--bl-color-danger);--main-hover-color:var(--bl-color-danger-hover)}:host([disabled]){cursor:not-allowed}:host([disabled]) .button{--main-color:var(--bl-color-tertiary);--main-hover-color:var(--bl-color-tertiary);--content-color:var(--bl-color-content-passive);--bg-color:var(--main-color);pointer-events:none;text-decoration:none}:host([variant='secondary']:hover:not([disabled])) .button,:host([variant='secondary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--bl-color-primary-background);--bg-color:var(--main-hover-color)}:host([variant='tertiary']:hover:not([disabled])) .button,:host([variant='tertiary'].__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__:not([disabled])) .button{--content-color:var(--main-hover-color);--bg-color:var(--text-hover-color)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-button.css';\nimport '../icon/bl-icon';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type TargetType = '_blank' | '_parent' | '_self' | '_top';\n\n/**\n * @tag bl-button\n * @summary Baklava Button component\n *\n * @cssproperty --bl-button-display - Sets the display property of button. Default value is 'inline-block'.\n *\n */\n@customElement('bl-button')\nexport default class BlButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'default';\n\n /**\n * Sets the button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets the button label. Used for accessibility.\n */\n @property({ type: String })\n label: string;\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Set link url. If set, button will be rendered as anchor tag.\n */\n @property({ type: String })\n href?: string;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: string;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = '_self';\n\n /**\n * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n */\n @property({ type: String })\n type: 'submit' | null;\n\n /**\n * Fires when button clicked\n */\n @event('bl-click') private onClick: EventDispatcher<string>;\n\n get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n get _hasDefaultSlot() {\n const childNodes = [...this.childNodes];\n return childNodes.some(node => {\n const nodeType = node.nodeType;\n // has only text node.\n if (nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n // has element node, it should not have slot attribute.\n if (nodeType === node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n return true;\n }\n }\n return false;\n });\n }\n\n render(): TemplateResult {\n const isAnchor = !!this.href;\n const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';\n const slots = html`<slot name=\"icon\">${icon}</slot> <span class=\"label\"><slot></slot></span>`;\n const classes = classMap({\n 'button': true,\n 'has-icon': this.icon || this._hasIconSlot,\n 'has-content': this._hasDefaultSlot,\n });\n\n return isAnchor\n ? html`<a\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n role=\"button\"\n >${slots}</a\n >`\n : html`<button\n class=${classes}\n aria-disabled=\"${ifDefined(this.disabled)}\"\n aria-label=\"${ifDefined(this.label)}\"\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${slots}\n </button>`;\n }\n\n private _handleClick() {\n this.onClick('Click event fired!');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-button': BlButton;\n }\n}\n"],
|
|
5
|
+
"mappings": "+NACO,IAAMA,EAASC,0+FACfC,EAAQF,ECmBf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAyB,UAMzB,UAAmB,UAMnB,UAAmB,SAYnB,cAAW,GAkBX,YAAsB,QAlDtB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6DA,IAAI,cAAe,CACjB,OAAO,KAAK,cAAc,wBAAwB,IAAM,IAC1D,CAEA,IAAI,iBAAkB,CAEpB,MADmB,CAAC,GAAG,KAAK,UAAU,EACpB,KAAKC,GAAQ,CA3FnC,IAAAC,EA4FM,IAAMC,EAAWF,EAAK,SAMtB,OAJIE,IAAaF,EAAK,aAAaC,EAAAD,EAAK,cAAL,YAAAC,EAAkB,UAAW,IAI5DC,IAAaF,EAAK,cAChB,CAAEA,EAAqB,aAAa,MAAM,CAKlD,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMG,EAAW,CAAC,CAAC,KAAK,KAClBC,EAAO,KAAK,KAAOC,kBAAqB,KAAK,kBAAoB,GACjEC,EAAQD,sBAAyBD,oDACjCG,EAAUC,EAAS,CACvB,OAAU,GACV,WAAY,KAAK,MAAQ,KAAK,aAC9B,cAAe,KAAK,eACtB,CAAC,EAED,OAAOL,EACHE;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,iBAC3BA,EAAU,KAAK,IAAI;AAAA,mBACjBA,EAAU,KAAK,MAAM;AAAA;AAAA,aAE3BH;AAAA,WAELD;AAAA,kBACUE;AAAA,2BACSE,EAAU,KAAK,QAAQ;AAAA,wBAC1BA,EAAU,KAAK,KAAK;AAAA,sBACtB,KAAK;AAAA,oBACP,KAAK;AAAA;AAAA,YAEbH;AAAA,kBAEV,CAEQ,cAAe,CACrB,KAAK,QAAQ,oBAAoB,CACnC,CACF,EA/GEI,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GARtBd,EASnB,uBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdtBd,EAenB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBtBd,EAqBnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA1BPd,EA2BnB,qBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhCvBd,EAiCnB,wBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAtCPd,EAuCnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5CPd,EA6CnB,oBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDPd,EAmDnB,sBAMAa,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAxDPd,EAyDnB,oBAK2Ba,EAAA,CAA1BE,EAAM,UAAU,GA9DEf,EA8DQ,uBA9DRA,EAArBa,EAAA,CADCG,EAAc,WAAW,GACLhB",
|
|
6
|
+
"names": ["styles", "r", "bl_button_default", "BlButton", "s", "bl_button_default", "node", "_a", "nodeType", "isAnchor", "icon", "$", "slots", "classes", "o", "l", "__decorateClass", "e", "event", "n"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as K}from"./chunk-2TVOKUHE.js";import{a as dt}from"./chunk-ENFFFE4I.js";import{a as ht}from"./chunk-KQBKSEYJ.js";import{a as Z}from"./chunk-23UFIOHV.js";import{a as ot,b as q,f as st,g as nt,h as E,i as lt,j as ct}from"./chunk-HG7OBTQS.js";import{a as f}from"./chunk-NZ3RGSR6.js";var d=function(l,o,s,r){if(s==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?l!==o||!r:!o.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return s==="m"?r:s==="a"?r.call(l):r?r.value:o.get(l)},C=function(l,o,s,r,g){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!g)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?l!==o||!g:!o.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?g.call(l,s):g?g.value=s:o.set(l,s),s};function ut(l){var o,s,r,g,F,S,A,W,I,R,O,$,L,P,_,D,H,G;class Q extends l{constructor(...n){super(...n),o.add(this),this.internals=this.attachInternals(),s.set(this,!1),r.set(this,!1),g.set(this,!1),F.set(this,void 0),S.set(this,void 0),W.set(this,""),I.set(this,()=>{C(this,g,!0,"f"),C(this,s,!0,"f"),d(this,o,"m",_).call(this)}),R.set(this,()=>{C(this,s,!1,"f"),d(this,o,"m",D).call(this,this.shouldFormValueUpdate()?d(this,W,"f"):""),!this.validity.valid&&d(this,g,"f")&&C(this,r,!0,"f");let c=d(this,o,"m",_).call(this);this.validationMessageCallback&&this.validationMessageCallback(c?this.internals.validationMessage:"")}),O.set(this,()=>{var c;C(this,r,!0,"f"),d(this,o,"m",_).call(this),(c=this===null||this===void 0?void 0:this.validationMessageCallback)===null||c===void 0||c.call(this,this.showError?this.internals.validationMessage:"")}),$.set(this,void 0),L.set(this,!1),P.set(this,Promise.resolve()),this.addEventListener("focus",d(this,I,"f")),this.addEventListener("blur",d(this,R,"f")),this.addEventListener("invalid",d(this,O,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let n=this.validators.map(y=>y.attribute),c=super.observedAttributes||[];return[...new Set([...c,...n])]}static getValidator(n){return this.validators.find(c=>c.attribute===n)||null}get form(){return this.internals.form}get showError(){return d(this,o,"m",_).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(n,c,w){var y;(y=super.attributeChangedCallback)===null||y===void 0||y.call(this,n,c,w),this.constructor.getValidator(n)&&this.validationTarget&&this.setValue(d(this,W,"f"))}setValue(n){var c;C(this,r,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),C(this,W,n,"f");let y=this.shouldFormValueUpdate()?n:null;this.internals.setFormValue(y),d(this,o,"m",D).call(this,y),this.valueChangedCallback&&this.valueChangedCallback(y),d(this,o,"m",_).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(n=>n(d(this,P,"f")))}formResetCallback(){var n,c;C(this,g,!1,"f"),C(this,r,!1,"f"),d(this,o,"m",_).call(this),(n=this.resetFormControl)===null||n===void 0||n.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,d(this,o,"m",_).call(this)?this.validationMessage:"")}}return s=new WeakMap,r=new WeakMap,g=new WeakMap,F=new WeakMap,S=new WeakMap,W=new WeakMap,I=new WeakMap,R=new WeakMap,O=new WeakMap,$=new WeakMap,L=new WeakMap,P=new WeakMap,o=new WeakSet,A=function(){let n=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return n.querySelectorAll(c)},_=function(){if(this.hasAttribute("disabled"))return!1;let n=d(this,r,"f")||d(this,g,"f")&&!this.validity.valid&&!d(this,s,"f");return n&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),n},D=function(n){let c=this.constructor,w={},y=c.validators,U=[];d(this,L,"f")||(C(this,P,new Promise(k=>{C(this,$,k,"f")}),"f"),C(this,L,!0,"f")),d(this,F,"f")&&(d(this,F,"f").abort(),C(this,S,d(this,F,"f"),"f"));let V=new AbortController;C(this,F,V,"f");let x,Y=!1;!y.length||(y.forEach(k=>{let N=k.key||"customError",z=k.isValid(this,n,V.signal);z instanceof Promise?(U.push(z),z.then(J=>{J!=null&&(w[N]=!J,x=d(this,o,"m",G).call(this,k,n),d(this,o,"m",H).call(this,w,x))})):(w[N]=!z,this.validity[N]!==!z&&(Y=!0),z||(x=d(this,o,"m",G).call(this,k,n)))}),Promise.allSettled(U).then(()=>{var k;V!=null&&V.signal.aborted||(C(this,L,!1,"f"),(k=d(this,$,"f"))===null||k===void 0||k.call(this))}),Y&&d(this,o,"m",H).call(this,w,x))},H=function(n,c){if(this.validationTarget)this.internals.setValidity(n,c,this.validationTarget);else{if(this.internals.setValidity(n,c),this.internals.validity.valid)return;let w=0,y=setInterval(()=>{w>=100||this.validity.valid?clearInterval(y):this.validationTarget&&(this.internals.setValidity(this.validity,c,this.validationTarget),clearInterval(y)),w+=1},0)}},G=function(n,c){if(this.validityCallback){let w=this.validityCallback(n.key||"customError");if(w)return w}return n.message instanceof Function?n.message(this,c):n.message},Q}var mt=l=>{if(l.reportValidity()){let o=new Event("submit",{cancelable:!0});l.dispatchEvent(o),o.defaultPrevented||l.submit()}else return};var Et=["valueMissing","typeMismatch","tooLong","tooShort","rangeUnderflow","rangeOverflow","badInput","customError"],pt=Et.map(l=>({key:l,isValid(o){return o.validationTarget?!o.validationTarget.validity[l]:!0}}));(function(){"use strict";let l=new WeakMap,o=new WeakMap,s=new WeakMap,r=new WeakMap,g=new WeakMap,F=new WeakMap,S=new WeakMap,A=new WeakMap,W=new WeakMap,I=new WeakMap,R=new WeakMap,O=new WeakMap,$=new WeakMap,L=new WeakMap,P={attributes:!0,attributeFilter:["disabled"]},_=new MutationObserver(e=>{for(let t of e){let a=t.target;if(a.constructor.formAssociated){let i=a.hasAttribute("disabled");a.toggleAttribute("internals-disabled",i),i?a.setAttribute("aria-disabled","true"):a.removeAttribute("aria-disabled"),a.formDisabledCallback&&a.formDisabledCallback.apply(a,[i])}}}),D=e=>{s.get(e).forEach(a=>{a.remove()}),s.set(e,[])},H=(e,t)=>{let a=document.createElement("input");return a.type="hidden",a.name=e.getAttribute("name"),e.after(a),s.get(t).push(a),a},G=(e,t)=>{s.set(t,[]);let a=e.hasAttribute("disabled");e.toggleAttribute("internals-disabled",a),_.observe(e,P)},Q=(e,t)=>{if(t.length){Array.from(t).forEach(i=>i.addEventListener("click",e.focus.bind(e)));let a=t[0].id;t[0].id||(a=`${t[0].htmlFor}_Label`,t[0].id=a),e.setAttribute("aria-labelledby",a)}},T=e=>{let t=Array.from(e.elements).filter(u=>u.validity).map(u=>u.validity.valid),a=A.get(e)||[],i=Array.from(a).filter(u=>u.isConnected).map(u=>r.get(u).validity.valid),m=[...t,...i].includes(!1);e.toggleAttribute("internals-invalid",m),e.toggleAttribute("internals-valid",!m)},n=e=>{T(V(e.target))},c=e=>{T(V(e.target))},w=e=>{let t=e.target,a=A.get(t);t.noValidate||a.size&&(Array.from(a).reverse().map(u=>r.get(u).reportValidity()).includes(!1)?(e.stopImmediatePropagation(),e.stopPropagation(),e.preventDefault()):L.get(t)&&L.get(t).call(t,e)===!1&&e.preventDefault())},y=e=>{let t=A.get(e.target);t&&t.size&&t.forEach(a=>{a.constructor.formAssociated&&a.formResetCallback&&a.formResetCallback.apply(a)})},U=(e,t,a)=>{if(t){t.onsubmit&&(L.set(t,t.onsubmit.bind(t)),t.onsubmit=null);let i=A.get(t);if(i)i.add(e);else{let m=new Set;m.add(e),A.set(t,m),t.addEventListener("submit",w),t.addEventListener("reset",y),t.addEventListener("input",n),t.addEventListener("change",c)}F.set(t,{ref:e,internals:a}),e.constructor.formAssociated&&e.formAssociatedCallback&&setTimeout(()=>{e.formAssociatedCallback.apply(e,[t])},0),T(t)}},V=e=>{let t=e.parentNode;return t&&t.tagName!=="FORM"&&(t=V(t)),t},x=(e,t,a=DOMException)=>{if(!e.constructor.formAssociated)throw new a(t)},Y=(e,t,a)=>{let i=A.get(e);return i&&i.size&&i.forEach(m=>{r.get(m)[a]()||(t=!1)}),t},k=e=>{if(e.constructor.formAssociated){let t=r.get(e),{labels:a,form:i}=t;Q(e,a),U(e,i,t)}},N={ariaAtomic:"aria-atomic",ariaAutoComplete:"aria-autocomplete",ariaBusy:"aria-busy",ariaChecked:"aria-checked",ariaColCount:"aria-colcount",ariaColIndex:"aria-colindex",ariaColSpan:"aria-colspan",ariaCurrent:"aria-current",ariaDisabled:"aria-disabled",ariaExpanded:"aria-expanded",ariaHasPopup:"aria-haspopup",ariaHidden:"aria-hidden",ariaKeyShortcuts:"aria-keyshortcuts",ariaLabel:"aria-label",ariaLevel:"aria-level",ariaLive:"aria-live",ariaModal:"aria-modal",ariaMultiLine:"aria-multiline",ariaMultiSelectable:"aria-multiselectable",ariaOrientation:"aria-orientation",ariaPlaceholder:"aria-placeholder",ariaPosInSet:"aria-posinset",ariaPressed:"aria-pressed",ariaReadOnly:"aria-readonly",ariaRelevant:"aria-relevant",ariaRequired:"aria-required",ariaRoleDescription:"aria-roledescription",ariaRowCount:"aria-rowcount",ariaRowIndex:"aria-rowindex",ariaRowSpan:"aria-rowspan",ariaSelected:"aria-selected",ariaSetSize:"aria-setsize",ariaSort:"aria-sort",ariaValueMax:"aria-valuemax",ariaValueMin:"aria-valuemin",ariaValueNow:"aria-valuenow",ariaValueText:"aria-valuetext",role:"role"},z=(e,t)=>{for(let a in N){t[a]=null;let i=null,m=N[a];Object.defineProperty(t,a,{get(){return i},set(u){i=u,e.isConnected?e.setAttribute(m,u):I.set(e,t)}})}};class et{constructor(){this.badInput=!1,this.customError=!1,this.patternMismatch=!1,this.rangeOverflow=!1,this.rangeUnderflow=!1,this.stepMismatch=!1,this.tooLong=!1,this.tooShort=!1,this.typeMismatch=!1,this.valid=!0,this.valueMissing=!1,Object.seal(this)}}let J=e=>(e.badInput=!1,e.customError=!1,e.patternMismatch=!1,e.rangeOverflow=!1,e.rangeUnderflow=!1,e.stepMismatch=!1,e.tooLong=!1,e.tooShort=!1,e.typeMismatch=!1,e.valid=!0,e.valueMissing=!1,e),vt=(e,t,a)=>(e.valid=bt(t),Object.keys(t).forEach(i=>e[i]=t[i]),a&&T(a),e),bt=e=>{let t=!0;for(let a in e)a!=="valid"&&e[a]!==!1&&(t=!1);return t};function at(e){let t=r.get(e),{form:a}=t;U(e,a,t),Q(e,t.labels)}function j(e){e.forEach(t=>{let{addedNodes:a,removedNodes:i}=t,m=Array.from(a),u=Array.from(i);m.forEach(p=>{if(r.has(p)&&p.constructor.formAssociated&&at(p),I.has(p)){let v=I.get(p);Object.keys(N).filter(M=>v[M]!==null).forEach(M=>{p.setAttribute(N[M],v[M])}),I.delete(p)}if(p.localName==="form"){let v=A.get(p),b=document.createTreeWalker(p,NodeFilter.SHOW_ELEMENT,{acceptNode(rt){return r.has(rt)&&!v&&!v.has(rt)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),M=b.nextNode();for(;M;)at(M),M=b.nextNode()}}),u.forEach(p=>{let v=r.get(p);v&&s.get(v)&&D(v),S.has(p)&&S.get(p).disconnect()})})}function gt(e){e.forEach(t=>{let{removedNodes:a}=t;a.forEach(i=>{let m=$.get(t.target);r.has(i)&&k(i),m.disconnect()})})}let yt=e=>{let t=new MutationObserver(gt);t.observe(e,{childList:!0}),$.set(e,t)};new MutationObserver(j);let B={childList:!0,subtree:!0},tt=new WeakMap;class X extends Set{static get isPolyfilled(){return!0}constructor(t){if(super(),!t||!t.tagName||t.tagName.indexOf("-")===-1)throw new TypeError("Illegal constructor");tt.set(this,t)}add(t){if(!/^--/.test(t)||typeof t!="string")throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);let a=super.add(t),i=tt.get(this);return i.toggleAttribute(`state${t}`,!0),i.part&&i.part.add(`state${t}`),a}clear(){for(let[t]of this.entries())this.delete(t);super.clear()}delete(t){let a=super.delete(t),i=tt.get(this);return i.toggleAttribute(`state${t}`,!1),i.part&&i.part.remove(`state${t}`),a}}class it{constructor(t){if(!t||!t.tagName||t.tagName.indexOf("-")===-1)throw new TypeError("Illegal constructor");let a=t.getRootNode(),i=new et;this.states=new X(t),l.set(this,t),o.set(this,i),r.set(t,this),z(t,this),G(t,this),Object.seal(this),k(t),a instanceof DocumentFragment&&yt(a)}static get isPolyfilled(){return!0}checkValidity(){let t=l.get(this);if(x(t,"Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!this.willValidate)return!0;let a=o.get(this);if(!a.valid){let i=new Event("invalid",{bubbles:!1,cancelable:!0,composed:!1});t.dispatchEvent(i)}return a.valid}get form(){let t=l.get(this);x(t,"Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");let a;return t.constructor.formAssociated===!0&&(a=V(t)),a}get labels(){let t=l.get(this);x(t,"Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");let a=t.getAttribute("id"),i=t.getRootNode();return i&&a?i.querySelectorAll(`[for=${a}]`):[]}reportValidity(){let t=l.get(this);if(x(t,"Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!this.willValidate)return!0;let a=this.checkValidity(),i=O.get(this);if(i&&!t.constructor.formAssociated)throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");return!a&&i&&(t.focus(),i.focus()),a}setFormValue(t){let a=l.get(this);if(x(a,"Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."),D(this),t!=null&&!(t instanceof FormData)){if(a.getAttribute("name")){let i=H(a,this);i.value=t}}else t!=null&&t instanceof FormData&&Array.from(t).reverse().forEach(([i,m])=>{if(typeof m=="string"){let u=H(a,this);u.name=i,u.value=m}});W.set(a,t)}setValidity(t,a,i){let m=l.get(this);if(x(m,"Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!t)throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");O.set(this,i);let u=o.get(this),p={};for(let M in t)p[M]=t[M];Object.keys(p).length===0&&J(u);let v={...u,...p};delete v.valid;let{valid:b}=vt(u,v,this.form);if(!b&&!a)throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");g.set(this,b?"":a),m.toggleAttribute("internals-invalid",!b),m.toggleAttribute("internals-valid",b),m.setAttribute("aria-invalid",`${!b}`)}get shadowRoot(){let t=l.get(this),a=R.get(t);return a||null}get validationMessage(){let t=l.get(this);return x(t,"Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."),g.get(this)}get validity(){let t=l.get(this);return x(t,"Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."),o.get(this)}get willValidate(){let t=l.get(this);return x(t,"Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."),!(t.disabled||t.hasAttribute("disabled")||t.hasAttribute("readonly"))}}function wt(){if(!window.ElementInternals)return!1;class e extends HTMLElement{constructor(){super(),this.internals=this.attachInternals()}}let t=`element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g,"")}`;customElements.define(t,e);let a=new e;return["shadowRoot","form","willValidate","validity","validationMessage","labels","setFormValue","setValidity","checkValidity","reportValidity"].every(i=>i in a.internals)}if(wt()){if(!window.CustomStateSet){window.CustomStateSet=X;let e=HTMLElement.prototype.attachInternals;HTMLElement.prototype.attachInternals=function(...t){let a=e.call(this,t);return a.states=new X(this),a}}}else{let e=function(...v){let b=i.apply(this,v),M=new MutationObserver(j);return R.set(this,b),window.ShadyDOM?M.observe(this,B):M.observe(b,B),S.set(this,M),b},t=function(...v){let b=u.apply(this,v);return Y(this,b,"checkValidity")},a=function(...v){let b=p.apply(this,v);return Y(this,b,"reportValidity")};window.ElementInternals=it,HTMLElement.prototype.attachInternals=function(){if(this.tagName.indexOf("-")===-1)throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");if(r.has(this))throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");return new it(this)};let i=Element.prototype.attachShadow;Element.prototype.attachShadow=e,new MutationObserver(j).observe(document.documentElement,B);let u=HTMLFormElement.prototype.checkValidity;HTMLFormElement.prototype.checkValidity=t;let p=HTMLFormElement.prototype.reportValidity;HTMLFormElement.prototype.reportValidity=a,window.CustomStateSet||(window.CustomStateSet=X)}})();var Mt=ot`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-form-label);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`,ft=Mt;var h=class extends ut(st){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=s=>{s.code==="Enter"&&this.form&&mt(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[ft]}connectedCallback(){var s;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(s=this.internals.form)==null||s.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}validityCallback(){var s;return this.customInvalidText||((s=this.validationTarget)==null?void 0:s.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(s){this.value=s}inputHandler(s){let r=s.target.value;this.setValue(r),this.onInput(r)}changeHandler(s){let r=s.target.value;this.dirty=!0,this.setValue(r),this.onChange(r)}firstUpdated(){this.setValue(this.value)}render(){let s=this.checkValidity()?"":q`<p class="invalid-text">${this.validationMessage}</p>`,r=this.helpText?q`<p class="help-text">${this.helpText}</p>`:"",g=this.icon?q` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",F=this.label?q`<label>${this.label}</label>`:"",S={dirty:this.dirty,"has-icon":this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""};return q`
|
|
1
|
+
import{a as K}from"./chunk-2TVOKUHE.js";import{a as dt}from"./chunk-ENFFFE4I.js";import{a as ht}from"./chunk-KQBKSEYJ.js";import{a as Z}from"./chunk-23UFIOHV.js";import{a as ot,b as q,f as st,g as nt,h as E,i as lt,j as ct}from"./chunk-HG7OBTQS.js";import{a as f}from"./chunk-NZ3RGSR6.js";var d=function(l,o,s,r){if(s==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?l!==o||!r:!o.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return s==="m"?r:s==="a"?r.call(l):r?r.value:o.get(l)},C=function(l,o,s,r,g){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!g)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?l!==o||!g:!o.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?g.call(l,s):g?g.value=s:o.set(l,s),s};function ut(l){var o,s,r,g,F,S,A,W,I,R,O,$,L,P,_,D,H,G;class Q extends l{constructor(...n){super(...n),o.add(this),this.internals=this.attachInternals(),s.set(this,!1),r.set(this,!1),g.set(this,!1),F.set(this,void 0),S.set(this,void 0),W.set(this,""),I.set(this,()=>{C(this,g,!0,"f"),C(this,s,!0,"f"),d(this,o,"m",_).call(this)}),R.set(this,()=>{C(this,s,!1,"f"),d(this,o,"m",D).call(this,this.shouldFormValueUpdate()?d(this,W,"f"):""),!this.validity.valid&&d(this,g,"f")&&C(this,r,!0,"f");let c=d(this,o,"m",_).call(this);this.validationMessageCallback&&this.validationMessageCallback(c?this.internals.validationMessage:"")}),O.set(this,()=>{var c;C(this,r,!0,"f"),d(this,o,"m",_).call(this),(c=this===null||this===void 0?void 0:this.validationMessageCallback)===null||c===void 0||c.call(this,this.showError?this.internals.validationMessage:"")}),$.set(this,void 0),L.set(this,!1),P.set(this,Promise.resolve()),this.addEventListener("focus",d(this,I,"f")),this.addEventListener("blur",d(this,R,"f")),this.addEventListener("invalid",d(this,O,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let n=this.validators.map(y=>y.attribute),c=super.observedAttributes||[];return[...new Set([...c,...n])]}static getValidator(n){return this.validators.find(c=>c.attribute===n)||null}get form(){return this.internals.form}get showError(){return d(this,o,"m",_).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(n,c,w){var y;(y=super.attributeChangedCallback)===null||y===void 0||y.call(this,n,c,w),this.constructor.getValidator(n)&&this.validationTarget&&this.setValue(d(this,W,"f"))}setValue(n){var c;C(this,r,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),C(this,W,n,"f");let y=this.shouldFormValueUpdate()?n:null;this.internals.setFormValue(y),d(this,o,"m",D).call(this,y),this.valueChangedCallback&&this.valueChangedCallback(y),d(this,o,"m",_).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(n=>n(d(this,P,"f")))}formResetCallback(){var n,c;C(this,g,!1,"f"),C(this,r,!1,"f"),d(this,o,"m",_).call(this),(n=this.resetFormControl)===null||n===void 0||n.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,d(this,o,"m",_).call(this)?this.validationMessage:"")}}return s=new WeakMap,r=new WeakMap,g=new WeakMap,F=new WeakMap,S=new WeakMap,W=new WeakMap,I=new WeakMap,R=new WeakMap,O=new WeakMap,$=new WeakMap,L=new WeakMap,P=new WeakMap,o=new WeakSet,A=function(){let n=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return n.querySelectorAll(c)},_=function(){if(this.hasAttribute("disabled"))return!1;let n=d(this,r,"f")||d(this,g,"f")&&!this.validity.valid&&!d(this,s,"f");return n&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),n},D=function(n){let c=this.constructor,w={},y=c.validators,U=[];d(this,L,"f")||(C(this,P,new Promise(k=>{C(this,$,k,"f")}),"f"),C(this,L,!0,"f")),d(this,F,"f")&&(d(this,F,"f").abort(),C(this,S,d(this,F,"f"),"f"));let V=new AbortController;C(this,F,V,"f");let x,Y=!1;!y.length||(y.forEach(k=>{let N=k.key||"customError",z=k.isValid(this,n,V.signal);z instanceof Promise?(U.push(z),z.then(J=>{J!=null&&(w[N]=!J,x=d(this,o,"m",G).call(this,k,n),d(this,o,"m",H).call(this,w,x))})):(w[N]=!z,this.validity[N]!==!z&&(Y=!0),z||(x=d(this,o,"m",G).call(this,k,n)))}),Promise.allSettled(U).then(()=>{var k;V!=null&&V.signal.aborted||(C(this,L,!1,"f"),(k=d(this,$,"f"))===null||k===void 0||k.call(this))}),Y&&d(this,o,"m",H).call(this,w,x))},H=function(n,c){if(this.validationTarget)this.internals.setValidity(n,c,this.validationTarget);else{if(this.internals.setValidity(n,c),this.internals.validity.valid)return;let w=0,y=setInterval(()=>{w>=100||this.validity.valid?clearInterval(y):this.validationTarget&&(this.internals.setValidity(this.validity,c,this.validationTarget),clearInterval(y)),w+=1},0)}},G=function(n,c){if(this.validityCallback){let w=this.validityCallback(n.key||"customError");if(w)return w}return n.message instanceof Function?n.message(this,c):n.message},Q}var pt=l=>{if(l.reportValidity()){let o=new Event("submit",{cancelable:!0});l.dispatchEvent(o),o.defaultPrevented||l.submit()}else return};var Et=["valueMissing","typeMismatch","tooLong","tooShort","rangeUnderflow","rangeOverflow","badInput","customError"],mt=Et.map(l=>({key:l,isValid(o){return o.validationTarget?!o.validationTarget.validity[l]:!0}}));(function(){"use strict";let l=new WeakMap,o=new WeakMap,s=new WeakMap,r=new WeakMap,g=new WeakMap,F=new WeakMap,S=new WeakMap,A=new WeakMap,W=new WeakMap,I=new WeakMap,R=new WeakMap,O=new WeakMap,$=new WeakMap,L=new WeakMap,P={attributes:!0,attributeFilter:["disabled"]},_=new MutationObserver(e=>{for(let t of e){let a=t.target;if(a.constructor.formAssociated){let i=a.hasAttribute("disabled");a.toggleAttribute("internals-disabled",i),i?a.setAttribute("aria-disabled","true"):a.removeAttribute("aria-disabled"),a.formDisabledCallback&&a.formDisabledCallback.apply(a,[i])}}}),D=e=>{s.get(e).forEach(a=>{a.remove()}),s.set(e,[])},H=(e,t)=>{let a=document.createElement("input");return a.type="hidden",a.name=e.getAttribute("name"),e.after(a),s.get(t).push(a),a},G=(e,t)=>{s.set(t,[]);let a=e.hasAttribute("disabled");e.toggleAttribute("internals-disabled",a),_.observe(e,P)},Q=(e,t)=>{if(t.length){Array.from(t).forEach(i=>i.addEventListener("click",e.focus.bind(e)));let a=t[0].id;t[0].id||(a=`${t[0].htmlFor}_Label`,t[0].id=a),e.setAttribute("aria-labelledby",a)}},T=e=>{let t=Array.from(e.elements).filter(u=>u.validity).map(u=>u.validity.valid),a=A.get(e)||[],i=Array.from(a).filter(u=>u.isConnected).map(u=>r.get(u).validity.valid),p=[...t,...i].includes(!1);e.toggleAttribute("internals-invalid",p),e.toggleAttribute("internals-valid",!p)},n=e=>{T(V(e.target))},c=e=>{T(V(e.target))},w=e=>{let t=e.target,a=A.get(t);t.noValidate||a.size&&(Array.from(a).reverse().map(u=>r.get(u).reportValidity()).includes(!1)?(e.stopImmediatePropagation(),e.stopPropagation(),e.preventDefault()):L.get(t)&&L.get(t).call(t,e)===!1&&e.preventDefault())},y=e=>{let t=A.get(e.target);t&&t.size&&t.forEach(a=>{a.constructor.formAssociated&&a.formResetCallback&&a.formResetCallback.apply(a)})},U=(e,t,a)=>{if(t){t.onsubmit&&(L.set(t,t.onsubmit.bind(t)),t.onsubmit=null);let i=A.get(t);if(i)i.add(e);else{let p=new Set;p.add(e),A.set(t,p),t.addEventListener("submit",w),t.addEventListener("reset",y),t.addEventListener("input",n),t.addEventListener("change",c)}F.set(t,{ref:e,internals:a}),e.constructor.formAssociated&&e.formAssociatedCallback&&setTimeout(()=>{e.formAssociatedCallback.apply(e,[t])},0),T(t)}},V=e=>{let t=e.parentNode;return t&&t.tagName!=="FORM"&&(t=V(t)),t},x=(e,t,a=DOMException)=>{if(!e.constructor.formAssociated)throw new a(t)},Y=(e,t,a)=>{let i=A.get(e);return i&&i.size&&i.forEach(p=>{r.get(p)[a]()||(t=!1)}),t},k=e=>{if(e.constructor.formAssociated){let t=r.get(e),{labels:a,form:i}=t;Q(e,a),U(e,i,t)}},N={ariaAtomic:"aria-atomic",ariaAutoComplete:"aria-autocomplete",ariaBusy:"aria-busy",ariaChecked:"aria-checked",ariaColCount:"aria-colcount",ariaColIndex:"aria-colindex",ariaColSpan:"aria-colspan",ariaCurrent:"aria-current",ariaDisabled:"aria-disabled",ariaExpanded:"aria-expanded",ariaHasPopup:"aria-haspopup",ariaHidden:"aria-hidden",ariaKeyShortcuts:"aria-keyshortcuts",ariaLabel:"aria-label",ariaLevel:"aria-level",ariaLive:"aria-live",ariaModal:"aria-modal",ariaMultiLine:"aria-multiline",ariaMultiSelectable:"aria-multiselectable",ariaOrientation:"aria-orientation",ariaPlaceholder:"aria-placeholder",ariaPosInSet:"aria-posinset",ariaPressed:"aria-pressed",ariaReadOnly:"aria-readonly",ariaRelevant:"aria-relevant",ariaRequired:"aria-required",ariaRoleDescription:"aria-roledescription",ariaRowCount:"aria-rowcount",ariaRowIndex:"aria-rowindex",ariaRowSpan:"aria-rowspan",ariaSelected:"aria-selected",ariaSetSize:"aria-setsize",ariaSort:"aria-sort",ariaValueMax:"aria-valuemax",ariaValueMin:"aria-valuemin",ariaValueNow:"aria-valuenow",ariaValueText:"aria-valuetext",role:"role"},z=(e,t)=>{for(let a in N){t[a]=null;let i=null,p=N[a];Object.defineProperty(t,a,{get(){return i},set(u){i=u,e.isConnected?e.setAttribute(p,u):I.set(e,t)}})}};class et{constructor(){this.badInput=!1,this.customError=!1,this.patternMismatch=!1,this.rangeOverflow=!1,this.rangeUnderflow=!1,this.stepMismatch=!1,this.tooLong=!1,this.tooShort=!1,this.typeMismatch=!1,this.valid=!0,this.valueMissing=!1,Object.seal(this)}}let J=e=>(e.badInput=!1,e.customError=!1,e.patternMismatch=!1,e.rangeOverflow=!1,e.rangeUnderflow=!1,e.stepMismatch=!1,e.tooLong=!1,e.tooShort=!1,e.typeMismatch=!1,e.valid=!0,e.valueMissing=!1,e),vt=(e,t,a)=>(e.valid=bt(t),Object.keys(t).forEach(i=>e[i]=t[i]),a&&T(a),e),bt=e=>{let t=!0;for(let a in e)a!=="valid"&&e[a]!==!1&&(t=!1);return t};function at(e){let t=r.get(e),{form:a}=t;U(e,a,t),Q(e,t.labels)}function j(e){e.forEach(t=>{let{addedNodes:a,removedNodes:i}=t,p=Array.from(a),u=Array.from(i);p.forEach(m=>{if(r.has(m)&&m.constructor.formAssociated&&at(m),I.has(m)){let v=I.get(m);Object.keys(N).filter(M=>v[M]!==null).forEach(M=>{m.setAttribute(N[M],v[M])}),I.delete(m)}if(m.localName==="form"){let v=A.get(m),b=document.createTreeWalker(m,NodeFilter.SHOW_ELEMENT,{acceptNode(rt){return r.has(rt)&&!v&&!v.has(rt)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),M=b.nextNode();for(;M;)at(M),M=b.nextNode()}}),u.forEach(m=>{let v=r.get(m);v&&s.get(v)&&D(v),S.has(m)&&S.get(m).disconnect()})})}function gt(e){e.forEach(t=>{let{removedNodes:a}=t;a.forEach(i=>{let p=$.get(t.target);r.has(i)&&k(i),p.disconnect()})})}let yt=e=>{let t=new MutationObserver(gt);t.observe(e,{childList:!0}),$.set(e,t)};new MutationObserver(j);let B={childList:!0,subtree:!0},tt=new WeakMap;class X extends Set{static get isPolyfilled(){return!0}constructor(t){if(super(),!t||!t.tagName||t.tagName.indexOf("-")===-1)throw new TypeError("Illegal constructor");tt.set(this,t)}add(t){if(!/^--/.test(t)||typeof t!="string")throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);let a=super.add(t),i=tt.get(this);return i.toggleAttribute(`state${t}`,!0),i.part&&i.part.add(`state${t}`),a}clear(){for(let[t]of this.entries())this.delete(t);super.clear()}delete(t){let a=super.delete(t),i=tt.get(this);return i.toggleAttribute(`state${t}`,!1),i.part&&i.part.remove(`state${t}`),a}}class it{constructor(t){if(!t||!t.tagName||t.tagName.indexOf("-")===-1)throw new TypeError("Illegal constructor");let a=t.getRootNode(),i=new et;this.states=new X(t),l.set(this,t),o.set(this,i),r.set(t,this),z(t,this),G(t,this),Object.seal(this),k(t),a instanceof DocumentFragment&&yt(a)}static get isPolyfilled(){return!0}checkValidity(){let t=l.get(this);if(x(t,"Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!this.willValidate)return!0;let a=o.get(this);if(!a.valid){let i=new Event("invalid",{bubbles:!1,cancelable:!0,composed:!1});t.dispatchEvent(i)}return a.valid}get form(){let t=l.get(this);x(t,"Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");let a;return t.constructor.formAssociated===!0&&(a=V(t)),a}get labels(){let t=l.get(this);x(t,"Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");let a=t.getAttribute("id"),i=t.getRootNode();return i&&a?i.querySelectorAll(`[for=${a}]`):[]}reportValidity(){let t=l.get(this);if(x(t,"Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!this.willValidate)return!0;let a=this.checkValidity(),i=O.get(this);if(i&&!t.constructor.formAssociated)throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");return!a&&i&&(t.focus(),i.focus()),a}setFormValue(t){let a=l.get(this);if(x(a,"Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."),D(this),t!=null&&!(t instanceof FormData)){if(a.getAttribute("name")){let i=H(a,this);i.value=t}}else t!=null&&t instanceof FormData&&Array.from(t).reverse().forEach(([i,p])=>{if(typeof p=="string"){let u=H(a,this);u.name=i,u.value=p}});W.set(a,t)}setValidity(t,a,i){let p=l.get(this);if(x(p,"Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."),!t)throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");O.set(this,i);let u=o.get(this),m={};for(let M in t)m[M]=t[M];Object.keys(m).length===0&&J(u);let v={...u,...m};delete v.valid;let{valid:b}=vt(u,v,this.form);if(!b&&!a)throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");g.set(this,b?"":a),p.toggleAttribute("internals-invalid",!b),p.toggleAttribute("internals-valid",b),p.setAttribute("aria-invalid",`${!b}`)}get shadowRoot(){let t=l.get(this),a=R.get(t);return a||null}get validationMessage(){let t=l.get(this);return x(t,"Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."),g.get(this)}get validity(){let t=l.get(this);return x(t,"Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."),o.get(this)}get willValidate(){let t=l.get(this);return x(t,"Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."),!(t.disabled||t.hasAttribute("disabled")||t.hasAttribute("readonly"))}}function wt(){if(!window.ElementInternals)return!1;class e extends HTMLElement{constructor(){super(),this.internals=this.attachInternals()}}let t=`element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g,"")}`;customElements.define(t,e);let a=new e;return["shadowRoot","form","willValidate","validity","validationMessage","labels","setFormValue","setValidity","checkValidity","reportValidity"].every(i=>i in a.internals)}if(wt()){if(!window.CustomStateSet){window.CustomStateSet=X;let e=HTMLElement.prototype.attachInternals;HTMLElement.prototype.attachInternals=function(...t){let a=e.call(this,t);return a.states=new X(this),a}}}else{let e=function(...v){let b=i.apply(this,v),M=new MutationObserver(j);return R.set(this,b),window.ShadyDOM?M.observe(this,B):M.observe(b,B),S.set(this,M),b},t=function(...v){let b=u.apply(this,v);return Y(this,b,"checkValidity")},a=function(...v){let b=m.apply(this,v);return Y(this,b,"reportValidity")};window.ElementInternals=it,HTMLElement.prototype.attachInternals=function(){if(this.tagName.indexOf("-")===-1)throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");if(r.has(this))throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");return new it(this)};let i=Element.prototype.attachShadow;Element.prototype.attachShadow=e,new MutationObserver(j).observe(document.documentElement,B);let u=HTMLFormElement.prototype.checkValidity;HTMLFormElement.prototype.checkValidity=t;let m=HTMLFormElement.prototype.reportValidity;HTMLFormElement.prototype.reportValidity=a,window.CustomStateSet||(window.CustomStateSet=X)}})();var Mt=ot`:host{display:inline-block;width:200px;position:relative;--bl-input-padding-vertical:var(--bl-size-2xs);--bl-input-padding-horizontal:var(--bl-size-xs);--bl-input-border-color:var(--bl-color-border);--bl-input-icon-color:var(--bl-color-content-tertiary);--bl-input-text-color:var(--bl-color-content-primary);--bl-input-height:var(--bl-size-2xl)}input{outline:0;box-sizing:border-box;height:var(--bl-input-height);border:solid 1px var(--bl-input-border-color);width:100%;font:var(--bl-font-title-3-regular);padding:0 var(--bl-input-padding-horizontal);margin:0;border-radius:4px;color:var(--bl-input-text-color)}bl-icon{position:absolute;top:var(--bl-input-padding-vertical);right:var(--bl-input-padding-horizontal);font-size:var(--bl-size-m);z-index:1;color:var(--bl-input-icon-color)}input:focus{--bl-input-border-color:var(--bl-color-primary)}:host([label-fixed]) bl-icon{top:calc(var(--bl-input-padding-vertical) + var(--bl-size-m))}input:focus ~ bl-icon{--bl-input-icon-color:var(--bl-color-primary)}:host ::placeholder{color:var(--bl-color-content-tertiary)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}:host input:focus::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}input:disabled{background-color:var(--bl-color-primary-background);--bl-input-text-color:var(--bl-color-content-tertiary)}input.dirty:invalid{--bl-input-border-color:var(--bl-color-danger)}input.has-icon{padding-right:calc(var(--bl-size-xs) * 2 + var(--bl-size-m))}.error-icon,.invalid-text{display:none}label{position:absolute;top:var(--bl-input-padding-vertical);left:var(--bl-input-padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0}:where(input:focus,input.has-value) ~ label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]){padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0}.dirty:invalid ~ label{color:var(--bl-color-danger)}.invalid-text,.help-text{font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal);margin:0}.invalid-text{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.error-icon{color:var(--bl-color-danger)}.dirty:invalid ~ .invalid-text{display:block}.dirty:invalid ~ .help-text{display:none}.dirty:invalid ~ .error-icon{display:inline-block}.dirty:invalid ~ .custom-icon ~ .error-icon{display:none}.dirty:invalid ~ .custom-icon{--bl-input-icon-color:var(--bl-color-danger)}:host([size='large']){--bl-input-height:var(--bl-size-3xl);--bl-input-padding-vertical:var(--bl-size-xs);--bl-input-padding-horizontal:var(--bl-size-m)}`,ft=Mt;var h=class extends ut(st){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=s=>{s.code==="Enter"&&this.form&&pt(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[ft]}connectedCallback(){var s;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(s=this.internals.form)==null||s.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}validityCallback(){var s;return this.customInvalidText||((s=this.validationTarget)==null?void 0:s.validationMessage)}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(s){this.value=s}inputHandler(s){let r=s.target.value;this.setValue(r),this.onInput(r)}changeHandler(s){let r=s.target.value;this.dirty=!0,this.setValue(r),this.onChange(r)}firstUpdated(){this.setValue(this.value)}render(){let s=this.checkValidity()?"":q`<p class="invalid-text">${this.validationMessage}</p>`,r=this.helpText?q`<p class="help-text">${this.helpText}</p>`:"",g=this.icon?q` <bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",F=this.label?q`<label>${this.label}</label>`:"",S={dirty:this.dirty,"has-icon":this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""};return q`
|
|
2
2
|
<input
|
|
3
3
|
type=${this.type}
|
|
4
4
|
class=${dt(S)}
|
|
@@ -16,5 +16,5 @@ import{a as K}from"./chunk-2TVOKUHE.js";import{a as dt}from"./chunk-ENFFFE4I.js"
|
|
|
16
16
|
${F} ${g}
|
|
17
17
|
<bl-icon class="error-icon" name="alert"></bl-icon>
|
|
18
18
|
${s} ${r}
|
|
19
|
-
`}};h.formControlValidators=
|
|
20
|
-
//# sourceMappingURL=chunk-
|
|
19
|
+
`}};h.formControlValidators=mt,f([ct("input")],h.prototype,"validationTarget",2),f([E({})],h.prototype,"type",2),f([E({})],h.prototype,"label",2),f([E({})],h.prototype,"placeholder",2),f([E()],h.prototype,"value",2),f([E({type:Boolean})],h.prototype,"required",2),f([E({type:Number})],h.prototype,"minlength",2),f([E({type:Number})],h.prototype,"maxlength",2),f([E({type:Number})],h.prototype,"min",2),f([E({type:Number})],h.prototype,"max",2),f([E({type:String})],h.prototype,"icon",2),f([E({type:String,reflect:!0})],h.prototype,"size",2),f([E({type:Boolean,reflect:!0})],h.prototype,"disabled",2),f([E({type:Boolean,attribute:"label-fixed"})],h.prototype,"labelFixed",2),f([E({type:String,attribute:"invalid-text"})],h.prototype,"customInvalidText",2),f([E({type:String,attribute:"help-text"})],h.prototype,"helpText",2),f([Z("bl-change")],h.prototype,"onChange",2),f([Z("bl-input")],h.prototype,"onInput",2),f([Z("bl-invalid")],h.prototype,"onInvalid",2),f([lt()],h.prototype,"dirty",2),h=f([nt("bl-input")],h);export{h as a};
|
|
20
|
+
//# sourceMappingURL=chunk-YZQVPLSP.js.map
|