@synergy-design-system/components 2.6.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{chunk.WO6VXGWQ.js → chunk.236RSW67.js} +6 -11
- package/dist/chunks/{chunk.WO6VXGWQ.js.map → chunk.236RSW67.js.map} +1 -1
- package/dist/chunks/{chunk.LGCK4I4E.js → chunk.2DWAWNCX.js} +2 -2
- package/dist/chunks/{chunk.HLQ75E45.js → chunk.2GFK6XTO.js} +13 -35
- package/dist/chunks/{chunk.UCZUWSO5.js → chunk.2H5VZMM6.js} +6 -6
- package/dist/chunks/{chunk.GKKENNQE.js → chunk.2RCFWUMX.js} +10 -10
- package/dist/chunks/{chunk.SNLPFVBC.js → chunk.35V3TAOT.js} +11 -2
- package/dist/chunks/{chunk.SNLPFVBC.js.map → chunk.35V3TAOT.js.map} +2 -2
- package/dist/chunks/{chunk.72I324LK.js → chunk.3BYNCSYI.js} +10 -8
- package/dist/chunks/chunk.3BYNCSYI.js.map +7 -0
- package/dist/chunks/{chunk.VB7U5SK7.js → chunk.3TAWE2BI.js} +2 -2
- package/dist/chunks/{chunk.GVPQNGY3.js → chunk.3TEIFNRP.js} +9 -9
- package/dist/chunks/{chunk.NREQNXC6.js → chunk.4WDBHKEV.js} +9 -12
- package/dist/chunks/{chunk.NREQNXC6.js.map → chunk.4WDBHKEV.js.map} +1 -1
- package/dist/chunks/{chunk.2VMSUMKU.js → chunk.4ZABXKYI.js} +2 -2
- package/dist/chunks/{chunk.RX7A4EQ2.js → chunk.5732DMBC.js} +9 -1
- package/dist/chunks/chunk.5732DMBC.js.map +7 -0
- package/dist/chunks/{chunk.F6HHFAPB.js → chunk.5WTYMY7E.js} +6 -6
- package/dist/chunks/{chunk.CGOHWVSA.js → chunk.6I4QZHQ6.js} +4 -4
- package/dist/chunks/{chunk.CGOHWVSA.js.map → chunk.6I4QZHQ6.js.map} +2 -2
- package/dist/chunks/{chunk.J2EUQLBR.js → chunk.6OCJR2YI.js} +5 -5
- package/dist/chunks/{chunk.6UAOF7WN.js → chunk.72HIKLQG.js} +24 -3
- package/dist/chunks/chunk.72HIKLQG.js.map +7 -0
- package/dist/chunks/{chunk.6BJDFV76.js → chunk.72KEPLD4.js} +2 -2
- package/dist/chunks/{chunk.ITKS5ZOS.js → chunk.74IOULXM.js} +2 -2
- package/dist/chunks/{chunk.AQJKRHVT.js → chunk.7B5QDYTK.js} +11 -15
- package/dist/chunks/chunk.7B5QDYTK.js.map +7 -0
- package/dist/chunks/{chunk.AQ3OGEJ7.js → chunk.7GVODRHO.js} +2 -2
- package/dist/chunks/{chunk.536NCWEA.js → chunk.7I5Q3H5W.js} +2 -2
- package/dist/chunks/{chunk.IJ67S5B6.js → chunk.7J54DP5U.js} +2 -2
- package/dist/chunks/{chunk.LH75WEHB.js → chunk.7YRTMCIL.js} +18 -18
- package/dist/chunks/chunk.7YRTMCIL.js.map +7 -0
- package/dist/chunks/{chunk.FMSA5VHT.js → chunk.A3OYJILJ.js} +2 -2
- package/dist/chunks/{chunk.H43NLW3K.js → chunk.A7S3RARM.js} +2 -2
- package/dist/chunks/{chunk.YCNVMJNR.js → chunk.BBNQVEPD.js} +3 -4
- package/dist/chunks/{chunk.YCNVMJNR.js.map → chunk.BBNQVEPD.js.map} +1 -1
- package/dist/chunks/{chunk.U7YAV7S3.js → chunk.BBUFEDXF.js} +5 -5
- package/dist/chunks/{chunk.U7YAV7S3.js.map → chunk.BBUFEDXF.js.map} +1 -1
- package/dist/chunks/{chunk.FIIQJSVJ.js → chunk.BHYMSPYR.js} +5 -5
- package/dist/chunks/{chunk.HVKRSLBD.js → chunk.CHG7CKU3.js} +5 -5
- package/dist/chunks/{chunk.HE4KPEL6.js → chunk.CSEYI4PC.js} +2 -2
- package/dist/chunks/{chunk.ZXXT7QGH.js → chunk.D23EOBAA.js} +2 -2
- package/dist/chunks/{chunk.U7XXAVXV.js → chunk.D5J4VTCV.js} +2 -2
- package/dist/chunks/{chunk.FRELNK6W.js → chunk.DGSAPH64.js} +8 -8
- package/dist/chunks/{chunk.NCXSLHHQ.js → chunk.DKGNY4YS.js} +11 -11
- package/dist/chunks/chunk.DKGNY4YS.js.map +7 -0
- package/dist/chunks/{chunk.R4Y2EU76.js → chunk.DRLBTO2U.js} +4 -6
- package/dist/chunks/{chunk.R4Y2EU76.js.map → chunk.DRLBTO2U.js.map} +1 -1
- package/dist/chunks/{chunk.K5OP4LDM.js → chunk.DVF5JNGN.js} +2 -2
- package/dist/chunks/{chunk.XE5OK2UE.js → chunk.DZSCTRUT.js} +2 -2
- package/dist/chunks/{chunk.RU5QGDNJ.js → chunk.ECTOUABW.js} +6 -6
- package/dist/chunks/{chunk.QQ3HY3YJ.js → chunk.ESQAXAFE.js} +2 -2
- package/dist/chunks/{chunk.UYMVCZFD.js → chunk.EUQCLKVZ.js} +5 -5
- package/dist/chunks/{chunk.UYMVCZFD.js.map → chunk.EUQCLKVZ.js.map} +1 -1
- package/dist/chunks/{chunk.4SSPQ66Z.js → chunk.EZRPX4D7.js} +4 -4
- package/dist/chunks/{chunk.HIIXDCGP.js → chunk.FK6MAJIJ.js} +4 -4
- package/dist/chunks/{chunk.ULJBPLL6.js → chunk.FP4J6SI7.js} +3 -3
- package/dist/chunks/{chunk.PPKWM5KJ.js → chunk.FPIGVZSR.js} +4 -4
- package/dist/chunks/{chunk.MLP2VIC7.js → chunk.FSWTBNSI.js} +6 -1
- package/dist/chunks/{chunk.MLP2VIC7.js.map → chunk.FSWTBNSI.js.map} +2 -2
- package/dist/chunks/{chunk.27HWF7JY.js → chunk.GHGGBS4N.js} +4 -7
- package/dist/chunks/{chunk.27HWF7JY.js.map → chunk.GHGGBS4N.js.map} +1 -1
- package/dist/chunks/{chunk.NPHJNN2T.js → chunk.GWQWHDLF.js} +3 -3
- package/dist/chunks/{chunk.KL7CAPPJ.js → chunk.HQ6QUSK7.js} +2 -2
- package/dist/chunks/{chunk.D65RJIQG.js → chunk.HTRLN6MZ.js} +2 -2
- package/dist/chunks/{chunk.T2BHFREJ.js → chunk.HY4Y3IF2.js} +4 -4
- package/dist/chunks/{chunk.S35OARTV.js → chunk.IGLR5WAI.js} +2 -2
- package/dist/chunks/{chunk.OOFVD7M5.js → chunk.IL3FC72M.js} +10 -10
- package/dist/chunks/{chunk.INQ5T33N.js → chunk.IMXRJ3YT.js} +2 -2
- package/dist/chunks/{chunk.R6T4FYGP.js → chunk.J6AAV3AV.js} +2 -2
- package/dist/chunks/{chunk.X7LEPG3A.js → chunk.JGJFNG7J.js} +59 -104
- package/dist/chunks/{chunk.X7LEPG3A.js.map → chunk.JGJFNG7J.js.map} +1 -1
- package/dist/chunks/{chunk.U2OMGNNZ.js → chunk.JNP34M27.js} +7 -6
- package/dist/chunks/chunk.JNP34M27.js.map +7 -0
- package/dist/chunks/{chunk.NFYLQHRP.js → chunk.JS5QB2ZL.js} +8 -8
- package/dist/chunks/{chunk.3I5JDTGT.js → chunk.JTYYYMG2.js} +9 -5
- package/dist/chunks/{chunk.3I5JDTGT.js.map → chunk.JTYYYMG2.js.map} +2 -2
- package/dist/chunks/{chunk.WZ3DZS4C.js → chunk.JWDKROBJ.js} +2 -2
- package/dist/chunks/{chunk.Y3LKXZKA.js → chunk.KSPAGGI2.js} +3 -3
- package/dist/chunks/{chunk.XVUJKP6I.js → chunk.LBU676EZ.js} +4 -4
- package/dist/chunks/{chunk.TOWZTCAT.js → chunk.LO6TVTD5.js} +2 -2
- package/dist/chunks/{chunk.PAFCMQM4.js → chunk.LXRYPCRA.js} +2 -2
- package/dist/chunks/{chunk.MCWFKLR3.js → chunk.LYDJ5XK6.js} +3 -3
- package/dist/chunks/{chunk.ITW4C543.js → chunk.M322AHXQ.js} +5 -5
- package/dist/chunks/{chunk.VXAM5HPM.js → chunk.MJIGVGWT.js} +2 -2
- package/dist/chunks/{chunk.XG3XBCNU.js → chunk.MJODVYOU.js} +2 -2
- package/dist/chunks/{chunk.OZGGB3YU.js → chunk.NRKWWLOJ.js} +2 -2
- package/dist/chunks/{chunk.3YMWLLPP.js → chunk.O644HRW3.js} +3 -1
- package/dist/chunks/{chunk.3YMWLLPP.js.map → chunk.O644HRW3.js.map} +2 -2
- package/dist/chunks/{chunk.PN2B3HKP.js → chunk.OGY5SV3K.js} +2 -2
- package/dist/chunks/{chunk.I6ROVIIB.js → chunk.ORSZM73W.js} +2 -2
- package/dist/chunks/{chunk.EIKNGXXK.js → chunk.PCNJFBUE.js} +2 -2
- package/dist/chunks/{chunk.E35IIEQ7.js → chunk.PLD6HW4G.js} +2 -2
- package/dist/chunks/{chunk.LQCQI2F4.js → chunk.QTUPZKVS.js} +2 -2
- package/dist/chunks/{chunk.GQMLBFF3.js → chunk.R2WZYDE2.js} +2 -2
- package/dist/chunks/{chunk.AZVHDONN.js → chunk.R67XSTNW.js} +9 -9
- package/dist/chunks/{chunk.XL5RSJ3V.js → chunk.RFJ2QHB5.js} +2 -2
- package/dist/chunks/{chunk.YOHLIT2Z.js → chunk.RKZLWXOJ.js} +4 -4
- package/dist/chunks/{chunk.MM55BLFM.js → chunk.RQA3KF7H.js} +12 -6
- package/dist/chunks/chunk.RQA3KF7H.js.map +7 -0
- package/dist/chunks/{chunk.4PD74CS6.js → chunk.TLNHPNZP.js} +2 -2
- package/dist/chunks/{chunk.63P7MT4J.js → chunk.TNX42WV4.js} +2 -2
- package/dist/chunks/{chunk.WYQ7ZY3X.js → chunk.TOMRCFI4.js} +2 -2
- package/dist/chunks/{chunk.K26XKBB4.js → chunk.TQCA6Q6L.js} +4 -4
- package/dist/chunks/{chunk.3HG7LHI7.js → chunk.TWPYJVSU.js} +8 -8
- package/dist/chunks/{chunk.CFXNQ5IS.js → chunk.TYV5CM4I.js} +56 -28
- package/dist/chunks/chunk.TYV5CM4I.js.map +7 -0
- package/dist/chunks/{chunk.OQQ3RUCC.js → chunk.UANQP7UZ.js} +2 -2
- package/dist/chunks/{chunk.3SWRT4AL.js → chunk.UXGBQPTV.js} +2 -2
- package/dist/chunks/{chunk.M2JYB7TN.js → chunk.V5VKAR7I.js} +2 -2
- package/dist/chunks/{chunk.FAAETEJ2.js → chunk.VGEA67UG.js} +7 -4
- package/dist/chunks/{chunk.FAAETEJ2.js.map → chunk.VGEA67UG.js.map} +2 -2
- package/dist/chunks/{chunk.OUEA3H7P.js → chunk.VQNVZMWW.js} +7 -9
- package/dist/chunks/{chunk.OUEA3H7P.js.map → chunk.VQNVZMWW.js.map} +1 -1
- package/dist/chunks/{chunk.4DCKHPZX.js → chunk.VQWI7RF7.js} +18 -18
- package/dist/chunks/chunk.VQWI7RF7.js.map +7 -0
- package/dist/chunks/{chunk.ITWCPUOB.js → chunk.W4DRGBOX.js} +10 -10
- package/dist/chunks/{chunk.X7TL7T7R.js → chunk.WJG5I5EW.js} +2 -2
- package/dist/chunks/{chunk.D3NSCKGB.js → chunk.X5ZOIEXZ.js} +2 -2
- package/dist/chunks/{chunk.CRU7ZSDO.js → chunk.XDM6VD32.js} +6 -10
- package/dist/chunks/{chunk.CRU7ZSDO.js.map → chunk.XDM6VD32.js.map} +1 -1
- package/dist/chunks/{chunk.UYCIME52.js → chunk.XNGZHSRO.js} +8 -12
- package/dist/chunks/{chunk.UYCIME52.js.map → chunk.XNGZHSRO.js.map} +1 -1
- package/dist/chunks/{chunk.KCVQQRVW.js → chunk.XOSZV7Y4.js} +2 -2
- package/dist/chunks/{chunk.J5H7WYNF.js → chunk.Y5BGNU6P.js} +2 -2
- package/dist/chunks/{chunk.AMAMIZIA.js → chunk.YARCDSSP.js} +2 -2
- package/dist/chunks/{chunk.6RTGL3PP.js → chunk.YGBYTIEC.js} +2 -2
- package/dist/chunks/{chunk.UQOWSCP3.js → chunk.YMC6ML2J.js} +2 -2
- package/dist/chunks/{chunk.2IEYCSI6.js → chunk.YVPJSA6G.js} +4 -4
- package/dist/chunks/{chunk.EJNLN3CX.js → chunk.YXKAU762.js} +2 -2
- package/dist/chunks/{chunk.DRA2UZ77.js → chunk.Z2AJQ6S4.js} +4 -5
- package/dist/chunks/{chunk.DRA2UZ77.js.map → chunk.Z2AJQ6S4.js.map} +2 -2
- package/dist/chunks/{chunk.JUZCWVBF.js → chunk.ZIJ6OGAT.js} +8 -8
- package/dist/chunks/{chunk.2TVDQYJX.js → chunk.ZRQDODBI.js} +8 -8
- package/dist/chunks/{chunk.OE4RXQU2.js → chunk.ZW75HBAK.js} +3 -3
- package/dist/chunks/chunk.ZW75HBAK.js.map +7 -0
- package/dist/chunks/{chunk.D3FO6WR5.js → chunk.ZWKWTOIU.js} +3 -3
- package/dist/components/accordion/accordion.component.js +4 -4
- package/dist/components/accordion/accordion.js +5 -5
- package/dist/components/accordion/accordion.styles.js +1 -1
- package/dist/components/alert/alert.component.js +10 -10
- package/dist/components/alert/alert.custom.styles.js +1 -1
- package/dist/components/alert/alert.js +11 -11
- package/dist/components/alert/alert.styles.js +1 -1
- package/dist/components/badge/badge.component.js +5 -5
- package/dist/components/badge/badge.custom.styles.js +1 -1
- package/dist/components/badge/badge.js +6 -6
- package/dist/components/badge/badge.styles.js +1 -1
- package/dist/components/breadcrumb/breadcrumb.component.js +7 -7
- package/dist/components/breadcrumb/breadcrumb.custom.styles.js +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +8 -8
- package/dist/components/breadcrumb/breadcrumb.styles.js +1 -1
- package/dist/components/breadcrumb-item/breadcrumb-item.component.js +4 -4
- package/dist/components/breadcrumb-item/breadcrumb-item.custom.styles.js +1 -1
- package/dist/components/breadcrumb-item/breadcrumb-item.js +5 -5
- package/dist/components/breadcrumb-item/breadcrumb-item.styles.js +1 -1
- package/dist/components/button/button.component.js +9 -9
- package/dist/components/button/button.custom.styles.js +1 -1
- package/dist/components/button/button.js +10 -10
- package/dist/components/button/button.styles.js +1 -1
- package/dist/components/button-group/button-group.component.js +3 -3
- package/dist/components/button-group/button-group.js +4 -4
- package/dist/components/button-group/button-group.styles.js +1 -1
- package/dist/components/card/card.component.js +3 -3
- package/dist/components/card/card.custom.styles.js +1 -1
- package/dist/components/card/card.js +4 -4
- package/dist/components/card/card.styles.js +1 -1
- package/dist/components/checkbox/checkbox.component.js +6 -6
- package/dist/components/checkbox/checkbox.custom.styles.js +1 -1
- package/dist/components/checkbox/checkbox.js +7 -7
- package/dist/components/checkbox/checkbox.styles.js +1 -1
- package/dist/components/details/details.component.js +9 -9
- package/dist/components/details/details.custom.styles.js +1 -1
- package/dist/components/details/details.js +10 -10
- package/dist/components/details/details.styles.js +1 -1
- package/dist/components/dialog/dialog.component.js +12 -12
- package/dist/components/dialog/dialog.custom.styles.js +1 -1
- package/dist/components/dialog/dialog.js +13 -13
- package/dist/components/dialog/dialog.styles.js +1 -1
- package/dist/components/divider/divider.component.js +4 -4
- package/dist/components/divider/divider.custom.styles.js +1 -1
- package/dist/components/divider/divider.js +5 -5
- package/dist/components/divider/divider.styles.js +1 -1
- package/dist/components/drawer/drawer.component.js +12 -12
- package/dist/components/drawer/drawer.custom.styles.js +1 -1
- package/dist/components/drawer/drawer.js +13 -13
- package/dist/components/drawer/drawer.styles.js +1 -1
- package/dist/components/dropdown/dropdown.component.d.ts +2 -1
- package/dist/components/dropdown/dropdown.component.js +9 -9
- package/dist/components/dropdown/dropdown.custom.styles.js +1 -1
- package/dist/components/dropdown/dropdown.js +10 -10
- package/dist/components/dropdown/dropdown.styles.js +1 -1
- package/dist/components/file/file.component.js +12 -12
- package/dist/components/file/file.js +13 -13
- package/dist/components/file/file.styles.js +1 -1
- package/dist/components/header/header.component.js +8 -8
- package/dist/components/header/header.js +9 -9
- package/dist/components/header/header.styles.js +1 -1
- package/dist/components/icon/icon.component.js +4 -4
- package/dist/components/icon/icon.custom.styles.js +1 -1
- package/dist/components/icon/icon.js +5 -5
- package/dist/components/icon/icon.styles.js +1 -1
- package/dist/components/icon/library.default.js +1 -1
- package/dist/components/icon/library.js +1 -1
- package/dist/components/icon/library.system.js +1 -1
- package/dist/components/icon-button/icon-button.component.js +5 -5
- package/dist/components/icon-button/icon-button.custom.styles.js +1 -1
- package/dist/components/icon-button/icon-button.js +6 -6
- package/dist/components/icon-button/icon-button.styles.js +1 -1
- package/dist/components/input/input.component.js +9 -9
- package/dist/components/input/input.custom.styles.js +1 -1
- package/dist/components/input/input.js +10 -10
- package/dist/components/input/input.styles.js +1 -1
- package/dist/components/menu/menu.component.js +3 -3
- package/dist/components/menu/menu.custom.styles.js +1 -1
- package/dist/components/menu/menu.js +4 -4
- package/dist/components/menu/menu.styles.js +1 -1
- package/dist/components/menu-item/menu-item.component.d.ts +0 -1
- package/dist/components/menu-item/menu-item.component.js +11 -11
- package/dist/components/menu-item/menu-item.custom.styles.js +1 -1
- package/dist/components/menu-item/menu-item.js +12 -12
- package/dist/components/menu-item/menu-item.styles.js +2 -2
- package/dist/components/menu-item/submenu-controller.d.ts +1 -3
- package/dist/components/menu-item/submenu-controller.js +2 -4
- package/dist/components/menu-label/menu-label.component.js +5 -5
- package/dist/components/menu-label/menu-label.custom.styles.js +1 -1
- package/dist/components/menu-label/menu-label.js +6 -6
- package/dist/components/menu-label/menu-label.styles.js +1 -1
- package/dist/components/nav-item/nav-item.component.js +6 -6
- package/dist/components/nav-item/nav-item.js +7 -7
- package/dist/components/nav-item/nav-item.styles.js +2 -2
- package/dist/components/optgroup/optgroup.component.js +5 -5
- package/dist/components/optgroup/optgroup.js +6 -6
- package/dist/components/optgroup/optgroup.styles.js +1 -1
- package/dist/components/option/option.component.js +7 -7
- package/dist/components/option/option.custom.styles.js +1 -1
- package/dist/components/option/option.js +8 -8
- package/dist/components/option/option.styles.js +1 -1
- package/dist/components/popup/popup.component.js +3 -3
- package/dist/components/popup/popup.js +4 -4
- package/dist/components/popup/popup.styles.js +1 -1
- package/dist/components/prio-nav/prio-nav.component.js +15 -15
- package/dist/components/prio-nav/prio-nav.js +16 -16
- package/dist/components/prio-nav/prio-nav.styles.js +1 -1
- package/dist/components/prio-nav/utils.js +1 -1
- package/dist/components/progress-bar/progress-bar.component.js +5 -5
- package/dist/components/progress-bar/progress-bar.custom.styles.js +1 -1
- package/dist/components/progress-bar/progress-bar.js +6 -6
- package/dist/components/progress-bar/progress-bar.styles.js +1 -1
- package/dist/components/progress-ring/progress-ring.component.js +5 -5
- package/dist/components/progress-ring/progress-ring.custom.styles.js +1 -1
- package/dist/components/progress-ring/progress-ring.js +6 -6
- package/dist/components/progress-ring/progress-ring.styles.js +1 -1
- package/dist/components/radio/radio.component.d.ts +0 -5
- package/dist/components/radio/radio.component.js +5 -5
- package/dist/components/radio/radio.custom.styles.js +1 -1
- package/dist/components/radio/radio.js +6 -6
- package/dist/components/radio/radio.styles.js +1 -1
- package/dist/components/radio-button/radio-button.component.js +4 -4
- package/dist/components/radio-button/radio-button.js +5 -5
- package/dist/components/radio-button/radio-button.styles.js +1 -1
- package/dist/components/radio-group/radio-group.component.js +6 -6
- package/dist/components/radio-group/radio-group.custom.styles.js +1 -1
- package/dist/components/radio-group/radio-group.js +7 -7
- package/dist/components/radio-group/radio-group.styles.js +1 -1
- package/dist/components/range/range.component.js +13 -13
- package/dist/components/range/range.js +14 -14
- package/dist/components/range/range.styles.js +1 -1
- package/dist/components/range/utility.js +2 -2
- package/dist/components/range-tick/range-tick.component.js +3 -3
- package/dist/components/range-tick/range-tick.js +4 -4
- package/dist/components/range-tick/range-tick.styles.js +1 -1
- package/dist/components/select/select.component.d.ts +3 -1
- package/dist/components/select/select.component.js +16 -16
- package/dist/components/select/select.custom.styles.js +2 -2
- package/dist/components/select/select.js +17 -17
- package/dist/components/select/select.styles.js +2 -2
- package/dist/components/side-nav/side-nav.component.js +14 -14
- package/dist/components/side-nav/side-nav.js +15 -15
- package/dist/components/side-nav/side-nav.styles.js +1 -1
- package/dist/components/spinner/spinner.component.js +5 -5
- package/dist/components/spinner/spinner.custom.styles.js +1 -1
- package/dist/components/spinner/spinner.js +6 -6
- package/dist/components/spinner/spinner.styles.js +1 -1
- package/dist/components/switch/switch.component.js +5 -5
- package/dist/components/switch/switch.custom.styles.js +1 -1
- package/dist/components/switch/switch.js +6 -6
- package/dist/components/switch/switch.styles.js +1 -1
- package/dist/components/tab/tab.component.d.ts +5 -4
- package/dist/components/tab/tab.component.js +10 -10
- package/dist/components/tab/tab.custom.styles.js +2 -2
- package/dist/components/tab/tab.js +11 -11
- package/dist/components/tab/tab.styles.js +2 -2
- package/dist/components/tab-group/tab-group.component.d.ts +2 -0
- package/dist/components/tab-group/tab-group.component.js +9 -9
- package/dist/components/tab-group/tab-group.custom.styles.js +1 -1
- package/dist/components/tab-group/tab-group.js +10 -10
- package/dist/components/tab-group/tab-group.styles.js +1 -1
- package/dist/components/tab-panel/tab-panel.component.js +4 -4
- package/dist/components/tab-panel/tab-panel.custom.styles.js +1 -1
- package/dist/components/tab-panel/tab-panel.js +5 -5
- package/dist/components/tab-panel/tab-panel.styles.js +1 -1
- package/dist/components/tag/tag.component.js +8 -8
- package/dist/components/tag/tag.custom.styles.js +1 -1
- package/dist/components/tag/tag.js +9 -9
- package/dist/components/tag/tag.styles.js +1 -1
- package/dist/components/textarea/textarea.component.js +5 -5
- package/dist/components/textarea/textarea.custom.styles.js +1 -1
- package/dist/components/textarea/textarea.js +6 -6
- package/dist/components/textarea/textarea.styles.js +1 -1
- package/dist/components/tooltip/tooltip.component.js +10 -10
- package/dist/components/tooltip/tooltip.custom.styles.js +1 -1
- package/dist/components/tooltip/tooltip.js +11 -11
- package/dist/components/tooltip/tooltip.styles.js +2 -2
- package/dist/custom-elements.json +160 -142
- package/dist/internal/animate.d.ts +3 -3
- package/dist/internal/longpress.d.ts +0 -1
- package/dist/styles/index.css +5 -2
- package/dist/styles/utility.css +4 -1
- package/dist/synergy-autoloader.js +1 -1
- package/dist/synergy.js +108 -108
- package/dist/translations/de.js +6 -9
- package/dist/translations/de.js.map +1 -1
- package/dist/translations/en.js +2 -2
- package/dist/utilities/animation-registry.js +2 -2
- package/dist/utilities/base-path.js +1 -1
- package/dist/utilities/form.js +3 -3
- package/dist/utilities/icon-library.js +1 -1
- package/dist/utilities/localize.js +3 -3
- package/dist/vscode.html-custom-data.json +26 -26
- package/package.json +33 -33
- package/dist/chunks/chunk.4DCKHPZX.js.map +0 -7
- package/dist/chunks/chunk.6UAOF7WN.js.map +0 -7
- package/dist/chunks/chunk.72I324LK.js.map +0 -7
- package/dist/chunks/chunk.AQJKRHVT.js.map +0 -7
- package/dist/chunks/chunk.CFXNQ5IS.js.map +0 -7
- package/dist/chunks/chunk.LH75WEHB.js.map +0 -7
- package/dist/chunks/chunk.MM55BLFM.js.map +0 -7
- package/dist/chunks/chunk.NCXSLHHQ.js.map +0 -7
- package/dist/chunks/chunk.OE4RXQU2.js.map +0 -7
- package/dist/chunks/chunk.RX7A4EQ2.js.map +0 -7
- package/dist/chunks/chunk.U2OMGNNZ.js.map +0 -7
- /package/dist/chunks/{chunk.LGCK4I4E.js.map → chunk.2DWAWNCX.js.map} +0 -0
- /package/dist/chunks/{chunk.HLQ75E45.js.map → chunk.2GFK6XTO.js.map} +0 -0
- /package/dist/chunks/{chunk.UCZUWSO5.js.map → chunk.2H5VZMM6.js.map} +0 -0
- /package/dist/chunks/{chunk.GKKENNQE.js.map → chunk.2RCFWUMX.js.map} +0 -0
- /package/dist/chunks/{chunk.VB7U5SK7.js.map → chunk.3TAWE2BI.js.map} +0 -0
- /package/dist/chunks/{chunk.GVPQNGY3.js.map → chunk.3TEIFNRP.js.map} +0 -0
- /package/dist/chunks/{chunk.2VMSUMKU.js.map → chunk.4ZABXKYI.js.map} +0 -0
- /package/dist/chunks/{chunk.F6HHFAPB.js.map → chunk.5WTYMY7E.js.map} +0 -0
- /package/dist/chunks/{chunk.J2EUQLBR.js.map → chunk.6OCJR2YI.js.map} +0 -0
- /package/dist/chunks/{chunk.6BJDFV76.js.map → chunk.72KEPLD4.js.map} +0 -0
- /package/dist/chunks/{chunk.ITKS5ZOS.js.map → chunk.74IOULXM.js.map} +0 -0
- /package/dist/chunks/{chunk.AQ3OGEJ7.js.map → chunk.7GVODRHO.js.map} +0 -0
- /package/dist/chunks/{chunk.536NCWEA.js.map → chunk.7I5Q3H5W.js.map} +0 -0
- /package/dist/chunks/{chunk.IJ67S5B6.js.map → chunk.7J54DP5U.js.map} +0 -0
- /package/dist/chunks/{chunk.FMSA5VHT.js.map → chunk.A3OYJILJ.js.map} +0 -0
- /package/dist/chunks/{chunk.H43NLW3K.js.map → chunk.A7S3RARM.js.map} +0 -0
- /package/dist/chunks/{chunk.FIIQJSVJ.js.map → chunk.BHYMSPYR.js.map} +0 -0
- /package/dist/chunks/{chunk.HVKRSLBD.js.map → chunk.CHG7CKU3.js.map} +0 -0
- /package/dist/chunks/{chunk.HE4KPEL6.js.map → chunk.CSEYI4PC.js.map} +0 -0
- /package/dist/chunks/{chunk.ZXXT7QGH.js.map → chunk.D23EOBAA.js.map} +0 -0
- /package/dist/chunks/{chunk.U7XXAVXV.js.map → chunk.D5J4VTCV.js.map} +0 -0
- /package/dist/chunks/{chunk.FRELNK6W.js.map → chunk.DGSAPH64.js.map} +0 -0
- /package/dist/chunks/{chunk.K5OP4LDM.js.map → chunk.DVF5JNGN.js.map} +0 -0
- /package/dist/chunks/{chunk.XE5OK2UE.js.map → chunk.DZSCTRUT.js.map} +0 -0
- /package/dist/chunks/{chunk.RU5QGDNJ.js.map → chunk.ECTOUABW.js.map} +0 -0
- /package/dist/chunks/{chunk.QQ3HY3YJ.js.map → chunk.ESQAXAFE.js.map} +0 -0
- /package/dist/chunks/{chunk.4SSPQ66Z.js.map → chunk.EZRPX4D7.js.map} +0 -0
- /package/dist/chunks/{chunk.HIIXDCGP.js.map → chunk.FK6MAJIJ.js.map} +0 -0
- /package/dist/chunks/{chunk.ULJBPLL6.js.map → chunk.FP4J6SI7.js.map} +0 -0
- /package/dist/chunks/{chunk.PPKWM5KJ.js.map → chunk.FPIGVZSR.js.map} +0 -0
- /package/dist/chunks/{chunk.NPHJNN2T.js.map → chunk.GWQWHDLF.js.map} +0 -0
- /package/dist/chunks/{chunk.KL7CAPPJ.js.map → chunk.HQ6QUSK7.js.map} +0 -0
- /package/dist/chunks/{chunk.D65RJIQG.js.map → chunk.HTRLN6MZ.js.map} +0 -0
- /package/dist/chunks/{chunk.T2BHFREJ.js.map → chunk.HY4Y3IF2.js.map} +0 -0
- /package/dist/chunks/{chunk.S35OARTV.js.map → chunk.IGLR5WAI.js.map} +0 -0
- /package/dist/chunks/{chunk.OOFVD7M5.js.map → chunk.IL3FC72M.js.map} +0 -0
- /package/dist/chunks/{chunk.INQ5T33N.js.map → chunk.IMXRJ3YT.js.map} +0 -0
- /package/dist/chunks/{chunk.R6T4FYGP.js.map → chunk.J6AAV3AV.js.map} +0 -0
- /package/dist/chunks/{chunk.NFYLQHRP.js.map → chunk.JS5QB2ZL.js.map} +0 -0
- /package/dist/chunks/{chunk.WZ3DZS4C.js.map → chunk.JWDKROBJ.js.map} +0 -0
- /package/dist/chunks/{chunk.Y3LKXZKA.js.map → chunk.KSPAGGI2.js.map} +0 -0
- /package/dist/chunks/{chunk.XVUJKP6I.js.map → chunk.LBU676EZ.js.map} +0 -0
- /package/dist/chunks/{chunk.TOWZTCAT.js.map → chunk.LO6TVTD5.js.map} +0 -0
- /package/dist/chunks/{chunk.PAFCMQM4.js.map → chunk.LXRYPCRA.js.map} +0 -0
- /package/dist/chunks/{chunk.MCWFKLR3.js.map → chunk.LYDJ5XK6.js.map} +0 -0
- /package/dist/chunks/{chunk.ITW4C543.js.map → chunk.M322AHXQ.js.map} +0 -0
- /package/dist/chunks/{chunk.VXAM5HPM.js.map → chunk.MJIGVGWT.js.map} +0 -0
- /package/dist/chunks/{chunk.XG3XBCNU.js.map → chunk.MJODVYOU.js.map} +0 -0
- /package/dist/chunks/{chunk.OZGGB3YU.js.map → chunk.NRKWWLOJ.js.map} +0 -0
- /package/dist/chunks/{chunk.PN2B3HKP.js.map → chunk.OGY5SV3K.js.map} +0 -0
- /package/dist/chunks/{chunk.I6ROVIIB.js.map → chunk.ORSZM73W.js.map} +0 -0
- /package/dist/chunks/{chunk.EIKNGXXK.js.map → chunk.PCNJFBUE.js.map} +0 -0
- /package/dist/chunks/{chunk.E35IIEQ7.js.map → chunk.PLD6HW4G.js.map} +0 -0
- /package/dist/chunks/{chunk.LQCQI2F4.js.map → chunk.QTUPZKVS.js.map} +0 -0
- /package/dist/chunks/{chunk.GQMLBFF3.js.map → chunk.R2WZYDE2.js.map} +0 -0
- /package/dist/chunks/{chunk.AZVHDONN.js.map → chunk.R67XSTNW.js.map} +0 -0
- /package/dist/chunks/{chunk.XL5RSJ3V.js.map → chunk.RFJ2QHB5.js.map} +0 -0
- /package/dist/chunks/{chunk.YOHLIT2Z.js.map → chunk.RKZLWXOJ.js.map} +0 -0
- /package/dist/chunks/{chunk.4PD74CS6.js.map → chunk.TLNHPNZP.js.map} +0 -0
- /package/dist/chunks/{chunk.63P7MT4J.js.map → chunk.TNX42WV4.js.map} +0 -0
- /package/dist/chunks/{chunk.WYQ7ZY3X.js.map → chunk.TOMRCFI4.js.map} +0 -0
- /package/dist/chunks/{chunk.K26XKBB4.js.map → chunk.TQCA6Q6L.js.map} +0 -0
- /package/dist/chunks/{chunk.3HG7LHI7.js.map → chunk.TWPYJVSU.js.map} +0 -0
- /package/dist/chunks/{chunk.OQQ3RUCC.js.map → chunk.UANQP7UZ.js.map} +0 -0
- /package/dist/chunks/{chunk.3SWRT4AL.js.map → chunk.UXGBQPTV.js.map} +0 -0
- /package/dist/chunks/{chunk.M2JYB7TN.js.map → chunk.V5VKAR7I.js.map} +0 -0
- /package/dist/chunks/{chunk.ITWCPUOB.js.map → chunk.W4DRGBOX.js.map} +0 -0
- /package/dist/chunks/{chunk.X7TL7T7R.js.map → chunk.WJG5I5EW.js.map} +0 -0
- /package/dist/chunks/{chunk.D3NSCKGB.js.map → chunk.X5ZOIEXZ.js.map} +0 -0
- /package/dist/chunks/{chunk.KCVQQRVW.js.map → chunk.XOSZV7Y4.js.map} +0 -0
- /package/dist/chunks/{chunk.J5H7WYNF.js.map → chunk.Y5BGNU6P.js.map} +0 -0
- /package/dist/chunks/{chunk.AMAMIZIA.js.map → chunk.YARCDSSP.js.map} +0 -0
- /package/dist/chunks/{chunk.6RTGL3PP.js.map → chunk.YGBYTIEC.js.map} +0 -0
- /package/dist/chunks/{chunk.UQOWSCP3.js.map → chunk.YMC6ML2J.js.map} +0 -0
- /package/dist/chunks/{chunk.2IEYCSI6.js.map → chunk.YVPJSA6G.js.map} +0 -0
- /package/dist/chunks/{chunk.EJNLN3CX.js.map → chunk.YXKAU762.js.map} +0 -0
- /package/dist/chunks/{chunk.JUZCWVBF.js.map → chunk.ZIJ6OGAT.js.map} +0 -0
- /package/dist/chunks/{chunk.2TVDQYJX.js.map → chunk.ZRQDODBI.js.map} +0 -0
- /package/dist/chunks/{chunk.D3FO6WR5.js.map → chunk.ZWKWTOIU.js.map} +0 -0
|
@@ -30,22 +30,12 @@
|
|
|
30
30
|
]
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
"name": "syn-
|
|
34
|
-
"description": "
|
|
33
|
+
"name": "syn-badge",
|
|
34
|
+
"description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
35
35
|
"attributes": [
|
|
36
|
-
{
|
|
37
|
-
"name": "open",
|
|
38
|
-
"description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
|
|
39
|
-
"values": []
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"name": "closable",
|
|
43
|
-
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
44
|
-
"values": []
|
|
45
|
-
},
|
|
46
36
|
{
|
|
47
37
|
"name": "variant",
|
|
48
|
-
"description": "The
|
|
38
|
+
"description": "The badge's theme variant.",
|
|
49
39
|
"values": [
|
|
50
40
|
{ "name": "primary" },
|
|
51
41
|
{ "name": "success" },
|
|
@@ -53,27 +43,32 @@
|
|
|
53
43
|
{ "name": "warning" },
|
|
54
44
|
{ "name": "danger" }
|
|
55
45
|
]
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"name": "duration",
|
|
59
|
-
"description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
|
|
60
|
-
"values": []
|
|
61
46
|
}
|
|
62
47
|
],
|
|
63
48
|
"references": [
|
|
64
49
|
{
|
|
65
50
|
"name": "Documentation",
|
|
66
|
-
"url": "https://synergy.style/components/
|
|
51
|
+
"url": "https://synergy.style/components/badge"
|
|
67
52
|
}
|
|
68
53
|
]
|
|
69
54
|
},
|
|
70
55
|
{
|
|
71
|
-
"name": "syn-
|
|
72
|
-
"description": "
|
|
56
|
+
"name": "syn-alert",
|
|
57
|
+
"description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
73
58
|
"attributes": [
|
|
59
|
+
{
|
|
60
|
+
"name": "open",
|
|
61
|
+
"description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
|
|
62
|
+
"values": []
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "closable",
|
|
66
|
+
"description": "Enables a close button that allows the user to dismiss the alert.",
|
|
67
|
+
"values": []
|
|
68
|
+
},
|
|
74
69
|
{
|
|
75
70
|
"name": "variant",
|
|
76
|
-
"description": "The
|
|
71
|
+
"description": "The alert's theme variant.",
|
|
77
72
|
"values": [
|
|
78
73
|
{ "name": "primary" },
|
|
79
74
|
{ "name": "success" },
|
|
@@ -81,12 +76,17 @@
|
|
|
81
76
|
{ "name": "warning" },
|
|
82
77
|
{ "name": "danger" }
|
|
83
78
|
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "duration",
|
|
82
|
+
"description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
|
|
83
|
+
"values": []
|
|
84
84
|
}
|
|
85
85
|
],
|
|
86
86
|
"references": [
|
|
87
87
|
{
|
|
88
88
|
"name": "Documentation",
|
|
89
|
-
"url": "https://synergy.style/components/
|
|
89
|
+
"url": "https://synergy.style/components/alert"
|
|
90
90
|
}
|
|
91
91
|
]
|
|
92
92
|
},
|
|
@@ -489,7 +489,7 @@
|
|
|
489
489
|
},
|
|
490
490
|
{
|
|
491
491
|
"name": "syn-dropdown",
|
|
492
|
-
"description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dropdown opens.\n- **syn-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **syn-hide** - Emitted when the dropdown closes.\n- **syn-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<syn-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
|
|
492
|
+
"description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dropdown opens.\n- **syn-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **syn-hide** - Emitted when the dropdown closes.\n- **syn-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<syn-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<syn-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
|
|
493
493
|
"attributes": [
|
|
494
494
|
{
|
|
495
495
|
"name": "open",
|
|
@@ -1542,7 +1542,7 @@
|
|
|
1542
1542
|
},
|
|
1543
1543
|
{
|
|
1544
1544
|
"name": "syn-select",
|
|
1545
|
-
"description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
|
|
1545
|
+
"description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
|
|
1546
1546
|
"attributes": [
|
|
1547
1547
|
{
|
|
1548
1548
|
"name": "name",
|
|
@@ -1736,7 +1736,7 @@
|
|
|
1736
1736
|
},
|
|
1737
1737
|
{
|
|
1738
1738
|
"name": "syn-tab",
|
|
1739
|
-
"description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **syn-close** - Emitted when the tab is closable and the close button is activated.\n\n### **
|
|
1739
|
+
"description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **syn-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
|
|
1740
1740
|
"attributes": [
|
|
1741
1741
|
{
|
|
1742
1742
|
"name": "panel",
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"url": "https://www.sick.com"
|
|
5
5
|
},
|
|
6
6
|
"name": "@synergy-design-system/components",
|
|
7
|
-
"version": "2.
|
|
7
|
+
"version": "2.7.0",
|
|
8
8
|
"description": "",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -44,59 +44,59 @@
|
|
|
44
44
|
],
|
|
45
45
|
"license": "MIT",
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@custom-elements-manifest/analyzer": "^0.
|
|
47
|
+
"@custom-elements-manifest/analyzer": "^0.10.3",
|
|
48
48
|
"@open-wc/testing": "^4.0.0",
|
|
49
|
-
"@playwright/test": "^1.
|
|
49
|
+
"@playwright/test": "^1.46.1",
|
|
50
50
|
"@semantic-release/changelog": "^6.0.3",
|
|
51
51
|
"@semantic-release/exec": "^6.0.3",
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
|
-
"@types/mocha": "^10.0.
|
|
53
|
+
"@types/mocha": "^10.0.7",
|
|
54
54
|
"@types/sinon": "^17.0.3",
|
|
55
|
-
"@typescript-eslint/eslint-plugin": "^7.
|
|
56
|
-
"@typescript-eslint/parser": "^7.
|
|
55
|
+
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
56
|
+
"@typescript-eslint/parser": "^7.18.0",
|
|
57
57
|
"@web/dev-server-esbuild": "^1.0.2",
|
|
58
|
-
"@web/test-runner": "^0.18.
|
|
58
|
+
"@web/test-runner": "^0.18.3",
|
|
59
59
|
"@web/test-runner-commands": "^0.9.0",
|
|
60
60
|
"@web/test-runner-playwright": "^0.11.0",
|
|
61
61
|
"chalk": "^5.3.0",
|
|
62
62
|
"change-case": "^5.4.4",
|
|
63
|
-
"command-line-args": "^
|
|
63
|
+
"command-line-args": "^6.0.0",
|
|
64
64
|
"comment-parser": "^1.4.1",
|
|
65
|
-
"custom-element-vs-code-integration": "^1.
|
|
65
|
+
"custom-element-vs-code-integration": "^1.4.1",
|
|
66
66
|
"del": "^7.1.0",
|
|
67
|
-
"esbuild": "^0.
|
|
67
|
+
"esbuild": "^0.23.1",
|
|
68
68
|
"esbuild-plugin-replace": "^1.4.0",
|
|
69
69
|
"eslint": "^8.57.0",
|
|
70
70
|
"eslint-config-airbnb": "^19.0.4",
|
|
71
71
|
"eslint-config-airbnb-typescript": "^18.0.0",
|
|
72
72
|
"eslint-plugin-import": "^2.29.1",
|
|
73
|
-
"eslint-plugin-jest": "^28.
|
|
74
|
-
"eslint-plugin-lit": "^1.
|
|
75
|
-
"eslint-plugin-lit-a11y": "^4.1.
|
|
76
|
-
"eslint-plugin-playwright": "^1.6.
|
|
77
|
-
"eslint-plugin-vue": "^9.
|
|
78
|
-
"eslint-plugin-wc": "^2.1.
|
|
79
|
-
"globby": "^14.0.
|
|
80
|
-
"jsdom": "^24.
|
|
81
|
-
"ng-packagr": "^18.
|
|
73
|
+
"eslint-plugin-jest": "^28.8.0",
|
|
74
|
+
"eslint-plugin-lit": "^1.14.0",
|
|
75
|
+
"eslint-plugin-lit-a11y": "^4.1.4",
|
|
76
|
+
"eslint-plugin-playwright": "^1.6.2",
|
|
77
|
+
"eslint-plugin-vue": "^9.27.0",
|
|
78
|
+
"eslint-plugin-wc": "^2.1.1",
|
|
79
|
+
"globby": "^14.0.2",
|
|
80
|
+
"jsdom": "^24.1.1",
|
|
81
|
+
"ng-packagr": "^18.2.0",
|
|
82
82
|
"ora": "^8.0.1",
|
|
83
|
-
"postcss": "^8.4.
|
|
83
|
+
"postcss": "^8.4.41",
|
|
84
84
|
"postcss-header": "^3.0.3",
|
|
85
85
|
"postcss-import": "^16.1.0",
|
|
86
|
-
"prettier": "^3.
|
|
86
|
+
"prettier": "^3.3.3",
|
|
87
87
|
"remark-parse": "^11.0.0",
|
|
88
88
|
"semantic-release": "^19.0.5",
|
|
89
89
|
"semantic-release-monorepo": "7.0.5",
|
|
90
|
-
"sinon": "^
|
|
91
|
-
"stylelint": "^16.
|
|
92
|
-
"typescript": "^5.4
|
|
93
|
-
"unified": "^11.0.
|
|
90
|
+
"sinon": "^18.0.0",
|
|
91
|
+
"stylelint": "^16.8.2",
|
|
92
|
+
"typescript": "^5.5.4",
|
|
93
|
+
"unified": "^11.0.5",
|
|
94
94
|
"unist-util-visit": "^5.0.0",
|
|
95
95
|
"user-agent-data-types": "^0.4.2",
|
|
96
|
-
"vendorism": "^
|
|
97
|
-
"vue-tsc": "^2.0.
|
|
96
|
+
"vendorism": "^5.0.0",
|
|
97
|
+
"vue-tsc": "^2.0.29",
|
|
98
98
|
"@synergy-design-system/eslint-config-syn": "0.1.0",
|
|
99
|
-
"@synergy-design-system/tokens": "2.
|
|
99
|
+
"@synergy-design-system/tokens": "2.8.0",
|
|
100
100
|
"@synergy-design-system/stylelint-config-syn": "0.1.0"
|
|
101
101
|
},
|
|
102
102
|
"release": {
|
|
@@ -158,14 +158,14 @@
|
|
|
158
158
|
}
|
|
159
159
|
},
|
|
160
160
|
"dependencies": {
|
|
161
|
-
"@floating-ui/dom": "^1.6.
|
|
161
|
+
"@floating-ui/dom": "^1.6.10",
|
|
162
162
|
"@shoelace-style/animations": "^1.1.0",
|
|
163
|
-
"@shoelace-style/localize": "^3.1
|
|
164
|
-
"composed-offset-position": "^0.0.
|
|
165
|
-
"lit": "^3.
|
|
163
|
+
"@shoelace-style/localize": "^3.2.1",
|
|
164
|
+
"composed-offset-position": "^0.0.6",
|
|
165
|
+
"lit": "^3.2.0"
|
|
166
166
|
},
|
|
167
167
|
"peerDependencies": {
|
|
168
|
-
"@synergy-design-system/tokens": "^2.
|
|
168
|
+
"@synergy-design-system/tokens": "^2.8.0"
|
|
169
169
|
},
|
|
170
170
|
"scripts": {
|
|
171
171
|
"build": "node scripts/build.js",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/tab/tab.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab.styles.js';\nimport customStyles from './tab.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy.style/components/tab\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport default class SynTab extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private readonly localize = new LocalizeController(this);\n\n private readonly attrId = ++id;\n private readonly componentId = `syn-tab-${this.attrId}`;\n\n @query('.tab') tab: HTMLElement;\n\n /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n @property({ reflect: true }) panel = '';\n\n /** Draws the tab in an active state. */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /** Makes the tab closable and shows a close button. */\n @property({ type: Boolean }) closable = false;\n\n /** Disables the tab and prevents selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n }\n\n private handleCloseClick(event: Event) {\n event.stopPropagation();\n this.emit('syn-close');\n }\n\n @watch('active')\n handleActiveChange() {\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n /** Sets focus to the tab. */\n focus(options?: FocusOptions) {\n this.tab.focus(options);\n }\n\n /** Removes focus from the tab. */\n blur() {\n this.tab.blur();\n }\n\n render() {\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n this.id = this.id.length > 0 ? this.id : this.componentId;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n tab: true,\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled\n })}\n tabindex=${this.disabled ? '-1' : '0'}\n >\n <slot></slot>\n ${this.closable\n ? html`\n <syn-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n name=\"x-lg\"\n library=\"system\"\n label=${this.localize.term('close')}\n class=\"tab__close-button\"\n @click=${this.handleCloseClick}\n tabindex=\"-1\"\n ></syn-icon-button>\n `\n : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-tab': SynTab;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAShC,IAAI,KAAK;AAkBT,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAEvD,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,WAAW,KAAK,MAAM;AAKxB,iBAAQ;AAGO,kBAAS;AAGxB,oBAAW;AAGI,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,iBAAiB,OAAc;AACrC,UAAM,gBAAgB;AACtB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,iBAAiB,KAAK,SAAS,SAAS,OAAO;AAAA,EACnE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,IAAI,MAAM,OAAO;AAAA,EACxB;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,IAAI,KAAK;AAAA,EAChB;AAAA,EAEA,SAAS;AAEP,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAE9C,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,MACtB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA,mBACS,KAAK,WAAW,OAAO,GAAG;AAAA;AAAA;AAAA,UAGnC,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,OAAO,CAAC;AAAA;AAAA,yBAE1B,KAAK,gBAAgB;AAAA;AAAA;AAAA,gBAIlC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAtFqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAO1C;AAAA,EAAd,MAAM,MAAM;AAAA,GATM,OASJ;AAGc;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAZR,OAYU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,OAeyB;AAGf;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAlBR,OAkBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,OAqByB;AAa5C;AAAA,EADC,MAAM,QAAQ;AAAA,GAjCI,OAkCnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GAtCE,OAuCnB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/select/select.custom.styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n /**\n * Invalid user data\n */\n :host([data-user-invalid]) .select__combobox {\n border-color: var(--syn-input-border-color-focus-error);\n }\n\n :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n border-color: var(--syn-input-border-color-focus-error);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n }\n\n /* Clear button */\n .select__clear {\n color: var(--syn-input-icon-icon-clearable-color);\n font-size: var(--syn-spacing-large);\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--syn-spacing-small);\n }\n\n /* Expand icon */\n .select__expand-icon {\n color: var(--syn-color-neutral-950);\n font-size: var(--syn-spacing-large);\n margin-inline-start: var(--syn-spacing-small);\n }\n\n /* Change select border on hover */\n /* stylelint-disable-next-line no-descending-specificity */\n .select:not(.select--disabled):hover .select__combobox {\n border-color: var(--syn-input-color-hover);\n }\n\n /* Prefix */\n\n /* Small */\n .select--small .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-spacing-x-small);\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-small);\n }\n\n .select--large .select__prefix::slotted(*) {\n margin-inline-end: var(--syn-input-spacing-medium);\n }\n\n .select__prefix {\n color: var(--syn-input-help-text-color);\n }\n\n /* Multi Select */\n .select__tags {\n margin-inline-start: var(--syn-spacing-medium);\n }\n\n .select--small .select__tags {\n gap: var(--syn-spacing-2x-small);\n }\n\n .select--medium .select__tags {\n gap: var(--syn-spacing-x-small);\n }\n\n .select--large .select__tags {\n gap: var(--syn-spacing-small);\n }\n\n /* Listbox */\n .select__listbox {\n /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n border-radius: 0;\n box-shadow: var(--syn-shadow-medium);\n }\n\n /**\n * Make sure to hide the syn-divider for the first syn-optgroup\n * Note! ::slotted does currently not work with ::part, so we\n * opted for using a css variable here.\n */\n .select__listbox ::slotted(syn-optgroup:first-of-type) {\n --display-divider: none;\n }\n`;\n"],
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/dropdown/dropdown.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { getTabbableBoundary } from '../../internal/tabbable.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynPopup from '../popup/popup.component.js';\nimport styles from './dropdown.styles.js';\nimport customStyles from './dropdown.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynSelectEvent } from '../../events/syn-select.js';\nimport type SynButton from '../button/button.js';\nimport type SynIconButton from '../icon-button/icon-button.js';\nimport type SynMenu from '../menu/menu.js';\n\n/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */\nexport default class SynDropdown extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-popup': SynPopup };\n\n @query('.dropdown') popup: SynPopup;\n @query('.dropdown__trigger') trigger: HTMLSlotElement;\n @query('.dropdown__panel') panel: HTMLSlotElement;\n\n private readonly localize = new LocalizeController(this);\n private closeWatcher: CloseWatcher | null;\n\n /**\n * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside of the viewport.\n */\n @property({ reflect: true }) placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom-start';\n\n /** Disables the dropdown so the panel will not open. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\n * dropdowns that allow for multiple interactions.\n */\n @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;\n\n /**\n * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n * components that use a dropdown internally.\n */\n @property({ attribute: false }) containingElement?: HTMLElement;\n\n /** The distance in pixels from which to offset the panel away from its trigger. */\n @property({ type: Number }) distance = 0;\n\n /** The distance in pixels from which to offset the panel along its trigger. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n /**\n * Syncs the popup width or height to that of the trigger element.\n */\n @property({ reflect: true }) sync: 'width' | 'height' | 'both' | undefined = undefined;\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.containingElement) {\n this.containingElement = this;\n }\n }\n\n firstUpdated() {\n this.panel.hidden = !this.open;\n\n // If the dropdown is visible on init, update its position\n if (this.open) {\n this.addOpenListeners();\n this.popup.active = true;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.hide();\n }\n\n focusOnTrigger() {\n const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n if (typeof trigger?.focus === 'function') {\n trigger.focus();\n }\n }\n\n getMenu() {\n return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'syn-menu') as\n | SynMenu\n | undefined;\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation\n // in case any ancestors are also listening for this key.\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n this.focusOnTrigger();\n }\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Close when escape or tab is pressed\n if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n event.stopPropagation();\n this.focusOnTrigger();\n this.hide();\n return;\n }\n\n // Handle tabbing\n if (event.key === 'Tab') {\n // Tabbing within an open menu should close the dropdown and refocus the trigger\n if (this.open && document.activeElement?.tagName.toLowerCase() === 'syn-menu-item') {\n event.preventDefault();\n this.hide();\n this.focusOnTrigger();\n return;\n }\n\n // Tabbing outside of the containing element closes the panel\n //\n // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n setTimeout(() => {\n const activeElement =\n this.containingElement?.getRootNode() instanceof ShadowRoot\n ? document.activeElement?.shadowRoot?.activeElement\n : document.activeElement;\n\n if (\n !this.containingElement ||\n activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement\n ) {\n this.hide();\n }\n });\n }\n };\n\n private handleDocumentMouseDown = (event: MouseEvent) => {\n // Close when clicking outside of the containing element\n const path = event.composedPath();\n if (this.containingElement && !path.includes(this.containingElement)) {\n this.hide();\n }\n };\n\n private handlePanelSelect = (event: SynSelectEvent) => {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'syn-menu') {\n this.hide();\n this.focusOnTrigger();\n }\n };\n\n handleTriggerClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n this.focusOnTrigger();\n }\n }\n\n async handleTriggerKeyDown(event: KeyboardEvent) {\n // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n // key again to hide the menu in case they don't want to make a selection.\n if ([' ', 'Enter'].includes(event.key)) {\n event.preventDefault();\n this.handleTriggerClick();\n return;\n }\n\n const menu = this.getMenu();\n\n if (menu) {\n const menuItems = menu.getAllItems();\n const firstMenuItem = menuItems[0];\n const lastMenuItem = menuItems[menuItems.length - 1];\n\n // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n // faster navigation.\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n event.preventDefault();\n\n // Show the menu if it's not already open\n if (!this.open) {\n this.show();\n\n // Wait for the dropdown to open before focusing, but not the animation\n await this.updateComplete;\n }\n\n if (menuItems.length > 0) {\n // Focus on the first/last menu item after showing\n this.updateComplete.then(() => {\n if (event.key === 'ArrowDown' || event.key === 'Home') {\n menu.setCurrentItem(firstMenuItem);\n firstMenuItem.focus();\n }\n\n if (event.key === 'ArrowUp' || event.key === 'End') {\n menu.setCurrentItem(lastMenuItem);\n lastMenuItem.focus();\n }\n });\n }\n }\n }\n }\n\n handleTriggerKeyUp(event: KeyboardEvent) {\n // Prevent space from triggering a click event in Firefox\n if (event.key === ' ') {\n event.preventDefault();\n }\n }\n\n handleTriggerSlotChange() {\n this.updateAccessibleTrigger();\n }\n\n //\n // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n // a child of the slotted element, or an element in the slotted element's shadow root.\n //\n // For example, the accessible trigger of an <syn-button> is a <button> located inside its shadow root.\n //\n // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n //\n updateAccessibleTrigger() {\n const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];\n const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);\n let target: HTMLElement;\n\n if (accessibleTrigger) {\n switch (accessibleTrigger.tagName.toLowerCase()) {\n // Synergy buttons have to update the internal button so it's announced correctly by screen readers\n case 'syn-button':\n case 'syn-icon-button':\n target = (accessibleTrigger as SynButton | SynIconButton).button;\n break;\n\n default:\n target = accessibleTrigger;\n }\n\n target.setAttribute('aria-haspopup', 'true');\n target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n }\n\n /** Shows the dropdown panel. */\n async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the dropdown panel */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n /**\n * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n * is activated.\n */\n reposition() {\n this.popup.reposition();\n }\n\n addOpenListeners() {\n this.panel.addEventListener('syn-select', this.handlePanelSelect);\n if ('CloseWatcher' in window) {\n this.closeWatcher?.destroy();\n this.closeWatcher = new CloseWatcher();\n this.closeWatcher.onclose = () => {\n this.hide();\n this.focusOnTrigger();\n };\n } else {\n this.panel.addEventListener('keydown', this.handleKeyDown);\n }\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n }\n\n removeOpenListeners() {\n if (this.panel) {\n this.panel.removeEventListener('syn-select', this.handlePanelSelect);\n this.panel.removeEventListener('keydown', this.handleKeyDown);\n }\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n this.closeWatcher?.destroy();\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.disabled) {\n this.open = false;\n return;\n }\n\n this.updateAccessibleTrigger();\n\n if (this.open) {\n // Show\n this.emit('syn-show');\n this.addOpenListeners();\n\n await stopAnimations(this);\n this.panel.hidden = false;\n this.popup.active = true;\n const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n\n this.emit('syn-after-show');\n } else {\n // Hide\n this.emit('syn-hide');\n this.removeOpenListeners();\n\n await stopAnimations(this);\n const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n this.panel.hidden = true;\n this.popup.active = false;\n\n this.emit('syn-after-hide');\n }\n }\n\n render() {\n return html`\n <syn-popup\n part=\"base\"\n id=\"dropdown\"\n placement=${this.placement}\n distance=${this.distance}\n skidding=${this.skidding}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n auto-size=\"vertical\"\n auto-size-padding=\"10\"\n sync=${ifDefined(this.sync ? this.sync : undefined)}\n class=${classMap({\n dropdown: true,\n 'dropdown--open': this.open\n })}\n >\n <slot\n name=\"trigger\"\n slot=\"anchor\"\n part=\"trigger\"\n class=\"dropdown__trigger\"\n @click=${this.handleTriggerClick}\n @keydown=${this.handleTriggerKeyDown}\n @keyup=${this.handleTriggerKeyUp}\n @slotchange=${this.handleTriggerSlotChange}\n ></slot>\n\n <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby=\"dropdown\">\n <slot part=\"panel\" class=\"dropdown__panel\"></slot>\n </div>\n </syn-popup>\n `;\n }\n}\n\nsetDefaultAnimation('dropdown.show', {\n keyframes: [\n { opacity: 0, scale: 0.9 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('dropdown.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.9 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["_a"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/menu-item/menu-item.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getTextContent, HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { SubmenuController } from './submenu-controller.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynSpinner from '../spinner/spinner.component.js';\nimport styles from './menu-item.styles.js';\nimport customStyles from './menu-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Menu items provide options for the user to pick from in a menu.\n * @documentation https://synergy.style/components/menu-item\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-spinner\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n * @slot submenu - Used to denote a nested menu.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart spinner - The spinner that shows when the menu item is in the loading state.\n * @csspart spinner__base - The spinner's base part.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n *\n * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.\n */\nexport default class SynMenuItem extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = {\n 'syn-icon': SynIcon,\n 'syn-popup': SynPopup,\n 'syn-spinner': SynSpinner\n };\n\n private cachedTextLabel: string;\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.menu-item') menuItem: HTMLElement;\n\n /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n @property() type: 'normal' | 'checkbox' = 'normal';\n\n /** Draws the item in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n @property() value = '';\n\n /** Draws the menu item in a loading state. */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Draws the menu item in a disabled state, preventing selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n private readonly localize = new LocalizeController(this);\n private readonly hasSlotController = new HasSlotController(this, 'submenu');\n private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.handleHostClick);\n this.addEventListener('mouseover', this.handleMouseOver);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.handleHostClick);\n this.removeEventListener('mouseover', this.handleMouseOver);\n }\n\n private handleDefaultSlotChange() {\n const textLabel = this.getTextLabel();\n\n // Ignore the first time the label is set\n if (typeof this.cachedTextLabel === 'undefined') {\n this.cachedTextLabel = textLabel;\n return;\n }\n\n // When the label changes, emit a slotchange event so parent controls see it\n if (textLabel !== this.cachedTextLabel) {\n this.cachedTextLabel = textLabel;\n this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n }\n }\n\n private handleHostClick = (event: MouseEvent) => {\n // Prevent the click event from being emitted when the button is disabled or loading\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n };\n\n private handleMouseOver = (event: MouseEvent) => {\n this.focus();\n event.stopPropagation();\n };\n\n @watch('checked')\n handleCheckedChange() {\n // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n if (this.checked && this.type !== 'checkbox') {\n this.checked = false;\n console.error('The checked attribute can only be used on menu items with type=\"checkbox\"', this);\n return;\n }\n\n // Only checkbox types can receive the aria-checked attribute\n if (this.type === 'checkbox') {\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n } else {\n this.removeAttribute('aria-checked');\n }\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('type')\n handleTypeChange() {\n if (this.type === 'checkbox') {\n this.setAttribute('role', 'menuitemcheckbox');\n this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n } else {\n this.setAttribute('role', 'menuitem');\n this.removeAttribute('aria-checked');\n }\n }\n\n /** Returns a text label based on the contents of the menu item's default slot. */\n getTextLabel() {\n return getTextContent(this.defaultSlot);\n }\n\n isSubmenu() {\n return this.hasSlotController.test('submenu');\n }\n\n render() {\n const isRtl = this.localize.dir() === 'rtl';\n const isSubmenuExpanded = this.submenuController.isExpanded();\n\n return html`\n <div\n id=\"anchor\"\n part=\"base\"\n class=${classMap({\n 'menu-item': true,\n 'menu-item--rtl': isRtl,\n 'menu-item--checked': this.checked,\n 'menu-item--disabled': this.disabled,\n 'menu-item--loading': this.loading,\n 'menu-item--has-submenu': this.isSubmenu(),\n 'menu-item--submenu-expanded': isSubmenuExpanded\n })}\n ?aria-haspopup=\"${this.isSubmenu()}\"\n ?aria-expanded=\"${isSubmenuExpanded ? true : false}\"\n >\n <span part=\"checked-icon\" class=\"menu-item__check\">\n <syn-icon name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n </span>\n\n <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n <slot part=\"label\" class=\"menu-item__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n\n <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n <syn-icon name=\"chevron-down\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n </span>\n\n ${this.submenuController.renderSubmenu()}\n ${this.loading ? html` <syn-spinner part=\"spinner\" exportparts=\"base:spinner__base\"></syn-spinner> ` : ''}\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/tab-group/tab-group.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab-group.styles.js';\nimport customStyles from './tab-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynTab from '../tab/tab.js';\nimport type SynTabPanel from '../tab-panel/tab-panel.js';\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport default class SynTabGroup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private readonly localize = new LocalizeController(this);\n\n private activeTab?: SynTab;\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n private tabs: SynTab[] = [];\n private panels: SynTabPanel[] = [];\n\n @query('.tab-group') tabGroup: HTMLElement;\n @query('.tab-group__body') body: HTMLSlotElement;\n @query('.tab-group__nav') nav: HTMLElement;\n @query('.tab-group__indicator') indicator: HTMLElement;\n\n @state() private hasScrollControls = false;\n\n /** The placement of the tabs. */\n @property() placement: 'top' | 'start' | 'end' = 'top';\n\n /**\n * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n */\n @property() activation: 'auto' | 'manual' = 'auto';\n\n /** Disables the scroll arrows that appear when tabs overflow. */\n @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n /** Draws the tab group as a contained element. */\n @property({ type: Boolean }) contained = false;\n \n /** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */\n @property({ type: Boolean }) sharp = false;\n\n connectedCallback() {\n const whenAllDefined = Promise.all([\n customElements.whenDefined('syn-tab'),\n customElements.whenDefined('syn-tab-panel')\n ]);\n\n super.connectedCallback();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.repositionIndicator();\n this.updateScrollControls();\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Update aria labels when the DOM changes\n if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (mutations.some(m => m.attributeName === 'disabled')) {\n this.syncTabsAndPanels();\n }\n });\n\n // After the first update...\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n this.resizeObserver.observe(this.nav);\n\n // Wait for tabs and tab panels to be registered\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.mutationObserver.disconnect();\n if (this.nav) {\n this.resizeObserver.unobserve(this.nav);\n }\n }\n\n private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=\"nav\"]')!;\n\n return [...(slot.assignedElements() as SynTab[])].filter(el => {\n return options.includeDisabled\n ? el.tagName.toLowerCase() === 'syn-tab'\n : el.tagName.toLowerCase() === 'syn-tab' && !el.disabled;\n });\n }\n\n private getAllPanels() {\n return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === 'syn-tab-panel') as [SynTabPanel];\n }\n\n private getActiveTab() {\n return this.tabs.find(el => el.active);\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = this.tabs.find(t => t.matches(':focus'));\n const isRtl = this.localize.dir() === 'rtl';\n\n if (activeEl?.tagName.toLowerCase() === 'syn-tab') {\n let index = this.tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = this.tabs.length - 1;\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n ) {\n index--;\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n ) {\n index++;\n }\n\n if (index < 0) {\n index = this.tabs.length - 1;\n }\n\n if (index > this.tabs.length - 1) {\n index = 0;\n }\n\n this.tabs[index].focus({ preventScroll: true });\n\n if (this.activation === 'auto') {\n this.setActiveTab(this.tabs[index], { scrollBehavior: 'smooth' });\n }\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n private handleScrollToStart() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft + this.nav.clientWidth\n : this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private handleScrollToEnd() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft - this.nav.clientWidth\n : this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private setActiveTab(tab: SynTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {\n options = {\n emitEvents: true,\n scrollBehavior: 'auto',\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.forEach(el => (el.active = el === this.activeTab));\n this.panels.forEach(el => (el.active = el.name === this.activeTab?.panel));\n this.syncIndicator();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n }\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit('syn-tab-hide', { detail: { name: previousTab.panel } });\n }\n\n this.emit('syn-tab-show', { detail: { name: this.activeTab.panel } });\n }\n }\n }\n\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n }\n });\n }\n\n private repositionIndicator() {\n const currentTab = this.getActiveTab();\n\n if (!currentTab) {\n return;\n }\n\n const width = currentTab.clientWidth;\n const height = currentTab.clientHeight;\n const isRtl = this.localize.dir() === 'rtl';\n\n // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n const allTabs = this.getAllTabs();\n const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));\n const offset = precedingTabs.reduce(\n (previous, current) => ({\n left: previous.left + current.clientWidth,\n top: previous.top + current.clientHeight\n }),\n { left: 0, top: 0 }\n );\n\n switch (this.placement) {\n case 'top':\n this.indicator.style.width = `calc(${width}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-large)' : '0px' })`;\n this.indicator.style.height = 'auto';\n this.indicator.style.translate = `calc(${isRtl ? '-' : ''}1 * (${offset.left}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-large)' : '0px' }))`;\n break;\n\n case 'start':\n case 'end':\n this.indicator.style.width = 'auto';\n this.indicator.style.height = `calc(${height}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-small)' : '0px' })`;\n this.indicator.style.translate = `0 calc(${offset.top}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-small)' : '0px' })`;\n break;\n }\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n private syncTabsAndPanels() {\n this.tabs = this.getAllTabs({ includeDisabled: false });\n this.panels = this.getAllPanels();\n this.syncIndicator();\n\n // After updating, show or hide scroll controls as needed\n this.updateComplete.then(() => this.updateScrollControls());\n }\n\n @watch('noScrollControls', { waitUntilFirstUpdate: true })\n updateScrollControls() {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However,\n // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely.\n // Adding a single pixel to the comparison seems to resolve it.\n //\n // See https://github.com/synergy-design-system/synergy/issues/1839\n this.hasScrollControls =\n ['top'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1;\n }\n }\n\n @watch('placement', { waitUntilFirstUpdate: true })\n syncIndicator() {\n const tab = this.getActiveTab();\n\n if (tab) {\n this.indicator.style.display = 'block';\n this.repositionIndicator();\n } else {\n this.indicator.style.display = 'none';\n }\n }\n\n /** Shows the specified tab panel. */\n show(panel: string) {\n const tab = this.tabs.find(el => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n render() {\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'tab-group': true,\n 'tab-group--top': this.placement === 'top',\n 'tab-group--start': this.placement === 'start',\n 'tab-group--end': this.placement === 'end',\n 'tab-group--rtl': this.localize.dir() === 'rtl',\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n 'tab-group--contained': this.contained,\n 'tab-group--sharp': this.sharp,\n })}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--start\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--start\"\n name=\"chevron-right\"\n library=\"system\"\n label=${this.localize.term('scrollToStart')}\n @click=${this.handleScrollToStart}\n ></syn-icon-button>\n `\n : ''}\n\n <div class=\"tab-group__nav\">\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div part=\"active-tab-indicator\" class=\"tab-group__indicator\"></div>\n <slot name=\"nav\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n </div>\n\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--end\"\n exportparts=\"base:scroll-button__base\"\n class=\"tab-group__scroll-button tab-group__scroll-button--end\"\n name=\"chevron-right\"\n library=\"system\"\n label=${this.localize.term('scrollToEnd')}\n @click=${this.handleScrollToEnd}\n ></syn-icon-button>\n `\n : ''}\n </div>\n\n <slot part=\"body\" class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-tab-group': SynTabGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/select/select.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynPopup from '../popup/popup.component.js';\nimport SynTag from '../tag/tag.component.js';\nimport styles from './select.styles.js';\nimport customStyles from './select.custom.styles.js';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type { SynRemoveEvent } from '../../events/syn-remove.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy.style/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n */\nexport default class SynSelect extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = {\n 'syn-icon': SynIcon,\n 'syn-popup': SynPopup,\n 'syn-tag': SynTag\n };\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-blur', 'syn-input']\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private readonly localize = new LocalizeController(this);\n private typeToSelectString = '';\n private typeToSelectTimeout: number;\n private closeWatcher: CloseWatcher | null;\n\n @query('.select') popup: SynPopup;\n @query('.select__combobox') combobox: HTMLSlotElement;\n @query('.select__display-input') displayInput: HTMLInputElement;\n @query('.select__value-input') valueInput: HTMLInputElement;\n @query('.select__listbox') listbox: HTMLSlotElement;\n\n @state() private hasFocus = false;\n @state() displayLabel = '';\n @state() currentOption: SynOption;\n @state() selectedOptions: SynOption[] = [];\n\n /** The name of the select, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /**\n * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\n * value attribute will be a space-delimited list of values based on the options selected, and the value property will\n * be an array. **For this reason, values must not contain spaces.**\n */\n @property({\n converter: {\n fromAttribute: (value: string) => value.split(' '),\n toAttribute: (value: string[]) => value.join(' ')\n }\n })\n value: string | string[] = '';\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue: string | string[] = '';\n\n /** The select's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Placeholder text to show as a hint when the select is empty. */\n @property() placeholder = '';\n\n /** Allows more than one option to be selected. */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /**\n * The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\n * indicate the number of additional items that are selected. Set to 0 to remove the limit.\n */\n @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;\n\n /** Disables the select control. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Adds a clear button when the select is not empty. */\n @property({ type: Boolean }) clearable = false;\n\n /**\n * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n */\n @property({ type: Boolean }) hoist = false;\n\n /** The select's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /**\n * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\n * inside of the viewport.\n */\n @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** The select's required attribute. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**\n * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\n * is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\n * the specified value.\n */\n @property() getTag: (option: SynOption, index: number) => TemplateResult | string | HTMLElement = option => {\n return html`\n <syn-tag\n part=\"tag\"\n exportparts=\"\n base:tag__base,\n content:tag__content,\n remove-button:tag__remove-button,\n remove-button__base:tag__remove-button__base\n \"\n size=${this.size}\n removable\n @syn-remove=${(event: SynRemoveEvent) => this.handleTagRemove(event, option)}\n >\n ${option.getTextLabel()}\n </syn-tag>\n `;\n };\n\n /** Gets the validity state object */\n get validity() {\n return this.valueInput.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.valueInput.validationMessage;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Because this is a form control, it shouldn't be opened initially\n this.open = false;\n }\n\n private addOpenListeners() {\n //\n // Listen on the root node instead of the document in case the elements are inside a shadow root\n //\n // https://github.com/synergy-design-system/synergy/issues/1763\n //\n document.addEventListener('focusin', this.handleDocumentFocusIn);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n // If the component is rendered in a shadow root, we need to attach the focusin listener there too\n if (this.getRootNode() !== document) {\n this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);\n }\n\n if ('CloseWatcher' in window) {\n this.closeWatcher?.destroy();\n this.closeWatcher = new CloseWatcher();\n this.closeWatcher.onclose = () => {\n if (this.open) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n };\n }\n }\n\n private removeOpenListeners() {\n document.removeEventListener('focusin', this.handleDocumentFocusIn);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n if (this.getRootNode() !== document) {\n this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);\n }\n\n this.closeWatcher?.destroy();\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.displayInput.setSelectionRange(0, 0);\n this.emit('syn-focus');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleDocumentFocusIn = (event: KeyboardEvent) => {\n // Close when focusing out of the select\n const path = event.composedPath();\n if (this && !path.includes(this)) {\n this.hide();\n }\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n const isClearButton = target.closest('.select__clear') !== null;\n const isIconButton = target.closest('syn-icon-button') !== null;\n\n // Ignore presses when the target is an icon button (e.g. the remove button in <syn-tag>)\n if (isClearButton || isIconButton) {\n return;\n }\n\n // Close when pressing escape\n if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n event.preventDefault();\n event.stopPropagation();\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n\n // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the\n // buffer we _don't_ close it.\n if (event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n // If it's not open, open it\n if (!this.open) {\n this.show();\n return;\n }\n\n // If it is open, update the value based on the current selection and close it\n if (this.currentOption && !this.currentOption.disabled) {\n if (this.multiple) {\n this.toggleOptionSelection(this.currentOption);\n } else {\n this.setSelectedOptions(this.currentOption);\n }\n\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n\n if (!this.multiple) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n }\n\n return;\n }\n\n // Navigate options\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const allOptions = this.getAllOptions();\n const currentIndex = allOptions.indexOf(this.currentOption);\n let newIndex = Math.max(0, currentIndex);\n\n // Prevent scrolling\n event.preventDefault();\n\n // Open it\n if (!this.open) {\n this.show();\n\n // If an option is already selected, stop here because we want that one to remain highlighted when the listbox\n // opens for the first time\n if (this.currentOption) {\n return;\n }\n }\n\n if (event.key === 'ArrowDown') {\n newIndex = currentIndex + 1;\n if (newIndex > allOptions.length - 1) newIndex = 0;\n } else if (event.key === 'ArrowUp') {\n newIndex = currentIndex - 1;\n if (newIndex < 0) newIndex = allOptions.length - 1;\n } else if (event.key === 'Home') {\n newIndex = 0;\n } else if (event.key === 'End') {\n newIndex = allOptions.length - 1;\n }\n\n this.setCurrentOption(allOptions[newIndex]);\n }\n\n // All other \"printable\" keys trigger type to select\n if (event.key.length === 1 || event.key === 'Backspace') {\n const allOptions = this.getAllOptions();\n\n // Don't block important key combos like CMD+R\n if (event.metaKey || event.ctrlKey || event.altKey) {\n return;\n }\n\n // Open, unless the key that triggered is backspace\n if (!this.open) {\n if (event.key === 'Backspace') {\n return;\n }\n\n this.show();\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);\n\n if (event.key === 'Backspace') {\n this.typeToSelectString = this.typeToSelectString.slice(0, -1);\n } else {\n this.typeToSelectString += event.key.toLowerCase();\n }\n\n for (const option of allOptions) {\n const label = option.getTextLabel().toLowerCase();\n\n if (label.startsWith(this.typeToSelectString)) {\n this.setCurrentOption(option);\n break;\n }\n }\n }\n };\n\n private handleDocumentMouseDown = (event: MouseEvent) => {\n // Close when clicking outside of the select\n const path = event.composedPath();\n if (this && !path.includes(this)) {\n this.hide();\n }\n };\n\n private handleLabelClick() {\n this.displayInput.focus();\n }\n\n private handleComboboxMouseDown(event: MouseEvent) {\n const path = event.composedPath();\n const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'syn-icon-button');\n\n // Ignore disabled controls and clicks on tags (remove buttons)\n if (this.disabled || isIconButton) {\n return;\n }\n\n event.preventDefault();\n this.displayInput.focus({ preventScroll: true });\n this.open = !this.open;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent) {\n if (event.key === 'Tab') {\n return;\n }\n\n event.stopPropagation();\n this.handleDocumentKeyDown(event);\n }\n\n private handleClearClick(event: MouseEvent) {\n event.stopPropagation();\n\n if (this.value !== '') {\n this.setSelectedOptions([]);\n this.displayInput.focus({ preventScroll: true });\n\n // Emit after update\n this.updateComplete.then(() => {\n this.emit('syn-clear');\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n }\n\n private handleClearMouseDown(event: MouseEvent) {\n // Don't lose focus or propagate events when clicking the clear button\n event.stopPropagation();\n event.preventDefault();\n }\n\n private handleOptionClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const option = target.closest('syn-option');\n const oldValue = this.value;\n\n if (option && !option.disabled) {\n if (this.multiple) {\n this.toggleOptionSelection(option);\n } else {\n this.setSelectedOptions(option);\n }\n\n // Set focus after updating so the value is announced by screen readers\n this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));\n\n if (this.value !== oldValue) {\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n\n if (!this.multiple) {\n this.hide();\n this.displayInput.focus({ preventScroll: true });\n }\n }\n }\n\n private handleDefaultSlotChange() {\n const allOptions = this.getAllOptions();\n const value = Array.isArray(this.value) ? this.value : [this.value];\n const values: string[] = [];\n\n // Check for duplicate values in menu items\n if (customElements.get('syn-option')) {\n allOptions.forEach(option => values.push(option.value));\n\n // Select only the options that match the new value\n this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n } else {\n // Rerun this handler when <syn-option> is registered\n customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n }\n }\n\n private handleTagRemove(event: SynRemoveEvent, option: SynOption) {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.toggleOptionSelection(option, false);\n\n // Emit after updating\n this.updateComplete.then(() => {\n this.emit('syn-input');\n this.emit('syn-change');\n });\n }\n }\n\n // Gets an array of all <syn-option> elements\n private getAllOptions() {\n return [...this.querySelectorAll<SynOption>('syn-option')];\n }\n\n // Gets the first <syn-option> element\n private getFirstOption() {\n return this.querySelector<SynOption>('syn-option');\n }\n\n // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one\n // option may be \"current\" at a time.\n private setCurrentOption(option: SynOption | null) {\n const allOptions = this.getAllOptions();\n\n // Clear selection\n allOptions.forEach(el => {\n el.current = false;\n el.tabIndex = -1;\n });\n\n // Select the target option\n if (option) {\n this.currentOption = option;\n option.current = true;\n option.tabIndex = 0;\n option.focus();\n }\n }\n\n // Sets the selected option(s)\n private setSelectedOptions(option: SynOption | SynOption[]) {\n const allOptions = this.getAllOptions();\n const newSelectedOptions = Array.isArray(option) ? option : [option];\n\n // Clear existing selection\n allOptions.forEach(el => (el.selected = false));\n\n // Set the new selection\n if (newSelectedOptions.length) {\n newSelectedOptions.forEach(el => (el.selected = true));\n }\n\n // Update selection, value, and display label\n this.selectionChanged();\n }\n\n // Toggles an option's selected state\n private toggleOptionSelection(option: SynOption, force?: boolean) {\n if (force === true || force === false) {\n option.selected = force;\n } else {\n option.selected = !option.selected;\n }\n\n this.selectionChanged();\n }\n\n // This method must be called whenever the selection changes. It will update the selected options cache, the current\n // value, and the display value\n private selectionChanged() {\n // Update selected options cache\n this.selectedOptions = this.getAllOptions().filter(el => el.selected);\n\n // Update the value and display label\n if (this.multiple) {\n this.value = this.selectedOptions.map(el => el.value);\n\n if (this.placeholder && this.value.length === 0) {\n // When no items are selected, keep the value empty so the placeholder shows\n this.displayLabel = '';\n } else {\n this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);\n }\n } else {\n this.value = this.selectedOptions[0]?.value ?? '';\n this.displayLabel = this.selectedOptions[0]?.getTextLabel() ?? '';\n }\n\n // Update validity\n this.updateComplete.then(() => {\n this.formControlController.updateValidity();\n });\n }\n protected get tags() {\n return this.selectedOptions.map((option, index) => {\n if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {\n const tag = this.getTag(option, index);\n // Wrap so we can handle the remove\n return html`<div @syn-remove=${(e: SynRemoveEvent) => this.handleTagRemove(e, option)}>\n ${typeof tag === 'string' ? unsafeHTML(tag) : tag}\n </div>`;\n } else if (index === this.maxOptionsVisible) {\n // Hit tag limit\n return html`<syn-tag size=${this.size}>+${this.selectedOptions.length - index}</syn-tag>`;\n }\n return html``;\n });\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Close the listbox when the control is disabled\n if (this.disabled) {\n this.open = false;\n this.handleOpenChange();\n }\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n handleValueChange() {\n const allOptions = this.getAllOptions();\n const value = Array.isArray(this.value) ? this.value : [this.value];\n\n // Select only the options that match the new value\n this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n }\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open && !this.disabled) {\n // Reset the current option\n this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());\n\n // Show\n this.emit('syn-show');\n this.addOpenListeners();\n\n await stopAnimations(this);\n this.listbox.hidden = false;\n this.popup.active = true;\n\n // Select the appropriate option based on value after the listbox opens\n requestAnimationFrame(() => {\n this.setCurrentOption(this.currentOption);\n });\n\n const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n\n // Make sure the current option is scrolled into view (required for Safari)\n if (this.currentOption) {\n scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');\n }\n\n this.emit('syn-after-show');\n } else {\n // Hide\n this.emit('syn-hide');\n this.removeOpenListeners();\n\n await stopAnimations(this);\n const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });\n await animateTo(this.popup.popup, keyframes, options);\n this.listbox.hidden = true;\n this.popup.active = false;\n\n this.emit('syn-after-hide');\n }\n }\n\n /** Shows the listbox. */\n async show() {\n if (this.open || this.disabled) {\n this.open = false;\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the listbox. */\n async hide() {\n if (!this.open || this.disabled) {\n this.open = false;\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.valueInput.checkValidity();\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity() {\n return this.valueInput.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.valueInput.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the control. */\n focus(options?: FocusOptions) {\n this.displayInput.focus(options);\n }\n\n /** Removes focus from the control. */\n blur() {\n this.displayInput.blur();\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;\n const isPlaceholderVisible = this.placeholder && this.value.length === 0;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n id=\"label\"\n part=\"form-control-label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <syn-popup\n class=${classMap({\n select: true,\n 'select--standard': true,\n 'select--open': this.open,\n 'select--disabled': this.disabled,\n 'select--multiple': this.multiple,\n 'select--focused': this.hasFocus,\n 'select--placeholder-visible': isPlaceholderVisible,\n 'select--top': this.placement === 'top',\n 'select--bottom': this.placement === 'bottom',\n 'select--small': this.size === 'small',\n 'select--medium': this.size === 'medium',\n 'select--large': this.size === 'large'\n })}\n placement=${this.placement}\n strategy=${this.hoist ? 'fixed' : 'absolute'}\n flip\n shift\n sync=\"width\"\n auto-size=\"vertical\"\n auto-size-padding=\"10\"\n >\n <div\n part=\"combobox\"\n class=\"select__combobox\"\n slot=\"anchor\"\n @keydown=${this.handleComboboxKeyDown}\n @mousedown=${this.handleComboboxMouseDown}\n >\n <slot part=\"prefix\" name=\"prefix\" class=\"select__prefix\"></slot>\n\n <input\n part=\"display-input\"\n class=\"select__display-input\"\n type=\"text\"\n placeholder=${this.placeholder}\n .disabled=${this.disabled}\n .value=${this.displayLabel}\n autocomplete=\"off\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n readonly\n aria-controls=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-labelledby=\"label\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n role=\"combobox\"\n tabindex=\"0\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n\n ${this.multiple ? html`<div part=\"tags\" class=\"select__tags\">${this.tags}</div>` : ''}\n\n <input\n class=\"select__value-input\"\n type=\"text\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n @focus=${() => this.focus()}\n @invalid=${this.handleInvalid}\n />\n\n ${hasClearIcon\n ? html`\n <button\n part=\"clear-button\"\n class=\"select__clear\"\n type=\"button\"\n aria-label=${this.localize.term('clearEntry')}\n @mousedown=${this.handleClearMouseDown}\n @click=${this.handleClearClick}\n tabindex=\"-1\"\n >\n <slot name=\"clear-icon\">\n <syn-icon name=\"x-circle-fill\" library=\"system\"></syn-icon>\n </slot>\n </button>\n `\n : ''}\n\n <slot name=\"expand-icon\" part=\"expand-icon\" class=\"select__expand-icon\">\n <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n </slot>\n </div>\n\n <div\n id=\"listbox\"\n role=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-multiselectable=${this.multiple ? 'true' : 'false'}\n aria-labelledby=\"label\"\n part=\"listbox\"\n class=\"select__listbox\"\n tabindex=\"-1\"\n @mouseup=${this.handleOptionClick}\n @slotchange=${this.handleDefaultSlotChange}\n >\n <slot></slot>\n </div>\n </syn-popup>\n </div>\n\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation('select.show', {\n keyframes: [\n { opacity: 0, scale: 0.9 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('select.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.9 }\n ],\n options: { duration: 100, easing: 'ease' }\n});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,gBAAgB;AAKzB,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAEvC,SAAS,kBAAkB;AA8D3B,IAAqB,YAArB,cAAuC,eAA6C;AAAA,EAApF;AAAA;AAQE,SAAiB,wBAAwB,IAAI,sBAAsB,MAAM;AAAA,MACvE,qBAAqB,CAAC,YAAY,WAAW;AAAA,IAC/C,CAAC;AACD,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,OAAO;AACrF,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AACvD,SAAQ,qBAAqB;AAUpB,SAAQ,WAAW;AACnB,wBAAe;AAEf,2BAA+B,CAAC;AAG7B,gBAAO;AAanB,iBAA2B;AAGX,wBAAkC;AAGrB,gBAAqC;AAGtD,uBAAc;AAGkB,oBAAW;AAMO,6BAAoB;AAGtC,oBAAW;AAG1B,qBAAY;AAMG,gBAAO;AAMtB,iBAAQ;AAGzB,iBAAQ;AAMS,qBAA8B;AAGrB,oBAAW;AAOpB,gBAAO;AAGQ,oBAAW;AAO3C,kBAAsF,YAAU;AAC1G,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASI,KAAK,IAAI;AAAA;AAAA,sBAEF,CAAC,UAA0B,KAAK,gBAAgB,OAAO,MAAM,CAAC;AAAA;AAAA,UAE1E,OAAO,aAAa,CAAC;AAAA;AAAA;AAAA,IAG7B;AAqEA,SAAQ,wBAAwB,CAAC,UAAyB;AAExD,YAAM,OAAO,MAAM,aAAa;AAChC,UAAI,QAAQ,CAAC,KAAK,SAAS,IAAI,GAAG;AAChC,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAEA,SAAQ,wBAAwB,CAAC,UAAyB;AACxD,YAAM,SAAS,MAAM;AACrB,YAAM,gBAAgB,OAAO,QAAQ,gBAAgB,MAAM;AAC3D,YAAM,eAAe,OAAO,QAAQ,iBAAiB,MAAM;AAG3D,UAAI,iBAAiB,cAAc;AACjC;AAAA,MACF;AAGA,UAAI,MAAM,QAAQ,YAAY,KAAK,QAAQ,CAAC,KAAK,cAAc;AAC7D,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,aAAK,KAAK;AACV,aAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MACjD;AAIA,UAAI,MAAM,QAAQ,WAAY,MAAM,QAAQ,OAAO,KAAK,uBAAuB,IAAK;AAClF,cAAM,eAAe;AACrB,cAAM,yBAAyB;AAG/B,YAAI,CAAC,KAAK,MAAM;AACd,eAAK,KAAK;AACV;AAAA,QACF;AAGA,YAAI,KAAK,iBAAiB,CAAC,KAAK,cAAc,UAAU;AACtD,cAAI,KAAK,UAAU;AACjB,iBAAK,sBAAsB,KAAK,aAAa;AAAA,UAC/C,OAAO;AACL,iBAAK,mBAAmB,KAAK,aAAa;AAAA,UAC5C;AAGA,eAAK,eAAe,KAAK,MAAM;AAC7B,iBAAK,KAAK,WAAW;AACrB,iBAAK,KAAK,YAAY;AAAA,UACxB,CAAC;AAED,cAAI,CAAC,KAAK,UAAU;AAClB,iBAAK,KAAK;AACV,iBAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UACjD;AAAA,QACF;AAEA;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,aAAa,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,GAAG;AAC/D,cAAM,aAAa,KAAK,cAAc;AACtC,cAAM,eAAe,WAAW,QAAQ,KAAK,aAAa;AAC1D,YAAI,WAAW,KAAK,IAAI,GAAG,YAAY;AAGvC,cAAM,eAAe;AAGrB,YAAI,CAAC,KAAK,MAAM;AACd,eAAK,KAAK;AAIV,cAAI,KAAK,eAAe;AACtB;AAAA,UACF;AAAA,QACF;AAEA,YAAI,MAAM,QAAQ,aAAa;AAC7B,qBAAW,eAAe;AAC1B,cAAI,WAAW,WAAW,SAAS;AAAG,uBAAW;AAAA,QACnD,WAAW,MAAM,QAAQ,WAAW;AAClC,qBAAW,eAAe;AAC1B,cAAI,WAAW;AAAG,uBAAW,WAAW,SAAS;AAAA,QACnD,WAAW,MAAM,QAAQ,QAAQ;AAC/B,qBAAW;AAAA,QACb,WAAW,MAAM,QAAQ,OAAO;AAC9B,qBAAW,WAAW,SAAS;AAAA,QACjC;AAEA,aAAK,iBAAiB,WAAW,QAAQ,CAAC;AAAA,MAC5C;AAGA,UAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,aAAa;AACvD,cAAM,aAAa,KAAK,cAAc;AAGtC,YAAI,MAAM,WAAW,MAAM,WAAW,MAAM,QAAQ;AAClD;AAAA,QACF;AAGA,YAAI,CAAC,KAAK,MAAM;AACd,cAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,UACF;AAEA,eAAK,KAAK;AAAA,QACZ;AAEA,cAAM,gBAAgB;AACtB,cAAM,eAAe;AAErB,qBAAa,KAAK,mBAAmB;AACrC,aAAK,sBAAsB,OAAO,WAAW,MAAO,KAAK,qBAAqB,IAAK,GAAI;AAEvF,YAAI,MAAM,QAAQ,aAAa;AAC7B,eAAK,qBAAqB,KAAK,mBAAmB,MAAM,GAAG,EAAE;AAAA,QAC/D,OAAO;AACL,eAAK,sBAAsB,MAAM,IAAI,YAAY;AAAA,QACnD;AAEA,mBAAW,UAAU,YAAY;AAC/B,gBAAM,QAAQ,OAAO,aAAa,EAAE,YAAY;AAEhD,cAAI,MAAM,WAAW,KAAK,kBAAkB,GAAG;AAC7C,iBAAK,iBAAiB,MAAM;AAC5B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,SAAQ,0BAA0B,CAAC,UAAsB;AAEvD,YAAM,OAAO,MAAM,aAAa;AAChC,UAAI,QAAQ,CAAC,KAAK,SAAS,IAAI,GAAG;AAChC,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAAA;AAAA;AAAA,EAjNA,IAAI,WAAW;AACb,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AAGxB,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,mBAAmB;AA/N7B;AAqOI,aAAS,iBAAiB,WAAW,KAAK,qBAAqB;AAC/D,aAAS,iBAAiB,WAAW,KAAK,qBAAqB;AAC/D,aAAS,iBAAiB,aAAa,KAAK,uBAAuB;AAGnE,QAAI,KAAK,YAAY,MAAM,UAAU;AACnC,WAAK,YAAY,EAAE,iBAAiB,WAAW,KAAK,qBAAqB;AAAA,IAC3E;AAEA,QAAI,kBAAkB,QAAQ;AAC5B,iBAAK,iBAAL,mBAAmB;AACnB,WAAK,eAAe,IAAI,aAAa;AACrC,WAAK,aAAa,UAAU,MAAM;AAChC,YAAI,KAAK,MAAM;AACb,eAAK,KAAK;AACV,eAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,QACjD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,sBAAsB;AA1PhC;AA2PI,aAAS,oBAAoB,WAAW,KAAK,qBAAqB;AAClE,aAAS,oBAAoB,WAAW,KAAK,qBAAqB;AAClE,aAAS,oBAAoB,aAAa,KAAK,uBAAuB;AAEtE,QAAI,KAAK,YAAY,MAAM,UAAU;AACnC,WAAK,YAAY,EAAE,oBAAoB,WAAW,KAAK,qBAAqB;AAAA,IAC9E;AAEA,eAAK,iBAAL,mBAAmB;AAAA,EACrB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,aAAa,kBAAkB,GAAG,CAAC;AACxC,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAmJQ,mBAAmB;AACzB,SAAK,aAAa,MAAM;AAAA,EAC1B;AAAA,EAEQ,wBAAwB,OAAmB;AACjD,UAAM,OAAO,MAAM,aAAa;AAChC,UAAM,eAAe,KAAK,KAAK,QAAM,cAAc,WAAW,GAAG,QAAQ,YAAY,MAAM,iBAAiB;AAG5G,QAAI,KAAK,YAAY,cAAc;AACjC;AAAA,IACF;AAEA,UAAM,eAAe;AACrB,SAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAC/C,SAAK,OAAO,CAAC,KAAK;AAAA,EACpB;AAAA,EAEQ,sBAAsB,OAAsB;AAClD,QAAI,MAAM,QAAQ,OAAO;AACvB;AAAA,IACF;AAEA,UAAM,gBAAgB;AACtB,SAAK,sBAAsB,KAAK;AAAA,EAClC;AAAA,EAEQ,iBAAiB,OAAmB;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,KAAK,UAAU,IAAI;AACrB,WAAK,mBAAmB,CAAC,CAAC;AAC1B,WAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAG/C,WAAK,eAAe,KAAK,MAAM;AAC7B,aAAK,KAAK,WAAW;AACrB,aAAK,KAAK,WAAW;AACrB,aAAK,KAAK,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,qBAAqB,OAAmB;AAE9C,UAAM,gBAAgB;AACtB,UAAM,eAAe;AAAA,EACvB;AAAA,EAEQ,kBAAkB,OAAmB;AAC3C,UAAM,SAAS,MAAM;AACrB,UAAM,SAAS,OAAO,QAAQ,YAAY;AAC1C,UAAM,WAAW,KAAK;AAEtB,QAAI,UAAU,CAAC,OAAO,UAAU;AAC9B,UAAI,KAAK,UAAU;AACjB,aAAK,sBAAsB,MAAM;AAAA,MACnC,OAAO;AACL,aAAK,mBAAmB,MAAM;AAAA,MAChC;AAGA,WAAK,eAAe,KAAK,MAAM,KAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;AAE/E,UAAI,KAAK,UAAU,UAAU;AAE3B,aAAK,eAAe,KAAK,MAAM;AAC7B,eAAK,KAAK,WAAW;AACrB,eAAK,KAAK,YAAY;AAAA,QACxB,CAAC;AAAA,MACH;AAEA,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,KAAK;AACV,aAAK,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MACjD;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,0BAA0B;AAChC,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,QAAQ,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC,KAAK,KAAK;AAClE,UAAM,SAAmB,CAAC;AAG1B,QAAI,eAAe,IAAI,YAAY,GAAG;AACpC,iBAAW,QAAQ,YAAU,OAAO,KAAK,OAAO,KAAK,CAAC;AAGtD,WAAK,mBAAmB,WAAW,OAAO,QAAM,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC;AAAA,IAC3E,OAAO;AAEL,qBAAe,YAAY,YAAY,EAAE,KAAK,MAAM,KAAK,wBAAwB,CAAC;AAAA,IACpF;AAAA,EACF;AAAA,EAEQ,gBAAgB,OAAuB,QAAmB;AAChE,UAAM,gBAAgB;AAEtB,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,sBAAsB,QAAQ,KAAK;AAGxC,WAAK,eAAe,KAAK,MAAM;AAC7B,aAAK,KAAK,WAAW;AACrB,aAAK,KAAK,YAAY;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA,EAGQ,gBAAgB;AACtB,WAAO,CAAC,GAAG,KAAK,iBAA4B,YAAY,CAAC;AAAA,EAC3D;AAAA;AAAA,EAGQ,iBAAiB;AACvB,WAAO,KAAK,cAAyB,YAAY;AAAA,EACnD;AAAA;AAAA;AAAA,EAIQ,iBAAiB,QAA0B;AACjD,UAAM,aAAa,KAAK,cAAc;AAGtC,eAAW,QAAQ,QAAM;AACvB,SAAG,UAAU;AACb,SAAG,WAAW;AAAA,IAChB,CAAC;AAGD,QAAI,QAAQ;AACV,WAAK,gBAAgB;AACrB,aAAO,UAAU;AACjB,aAAO,WAAW;AAClB,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAAA;AAAA,EAGQ,mBAAmB,QAAiC;AAC1D,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,qBAAqB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AAGnE,eAAW,QAAQ,QAAO,GAAG,WAAW,KAAM;AAG9C,QAAI,mBAAmB,QAAQ;AAC7B,yBAAmB,QAAQ,QAAO,GAAG,WAAW,IAAK;AAAA,IACvD;AAGA,SAAK,iBAAiB;AAAA,EACxB;AAAA;AAAA,EAGQ,sBAAsB,QAAmB,OAAiB;AAChE,QAAI,UAAU,QAAQ,UAAU,OAAO;AACrC,aAAO,WAAW;AAAA,IACpB,OAAO;AACL,aAAO,WAAW,CAAC,OAAO;AAAA,IAC5B;AAEA,SAAK,iBAAiB;AAAA,EACxB;AAAA;AAAA;AAAA,EAIQ,mBAAmB;AA5kB7B;AA8kBI,SAAK,kBAAkB,KAAK,cAAc,EAAE,OAAO,QAAM,GAAG,QAAQ;AAGpE,QAAI,KAAK,UAAU;AACjB,WAAK,QAAQ,KAAK,gBAAgB,IAAI,QAAM,GAAG,KAAK;AAEpD,UAAI,KAAK,eAAe,KAAK,MAAM,WAAW,GAAG;AAE/C,aAAK,eAAe;AAAA,MACtB,OAAO;AACL,aAAK,eAAe,KAAK,SAAS,KAAK,sBAAsB,KAAK,gBAAgB,MAAM;AAAA,MAC1F;AAAA,IACF,OAAO;AACL,WAAK,SAAQ,gBAAK,gBAAgB,CAAC,MAAtB,mBAAyB,UAAzB,YAAkC;AAC/C,WAAK,gBAAe,gBAAK,gBAAgB,CAAC,MAAtB,mBAAyB,mBAAzB,YAA2C;AAAA,IACjE;AAGA,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,sBAAsB,eAAe;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EACA,IAAc,OAAO;AACnB,WAAO,KAAK,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACjD,UAAI,QAAQ,KAAK,qBAAqB,KAAK,qBAAqB,GAAG;AACjE,cAAM,MAAM,KAAK,OAAO,QAAQ,KAAK;AAErC,eAAO,wBAAwB,CAAC,MAAsB,KAAK,gBAAgB,GAAG,MAAM,CAAC;AAAA,YACjF,OAAO,QAAQ,WAAW,WAAW,GAAG,IAAI,GAAG;AAAA;AAAA,MAErD,WAAW,UAAU,KAAK,mBAAmB;AAE3C,eAAO,qBAAqB,KAAK,IAAI,KAAK,KAAK,gBAAgB,SAAS,KAAK;AAAA,MAC/E;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAGA,uBAAuB;AAErB,QAAI,KAAK,UAAU;AACjB,WAAK,OAAO;AACZ,WAAK,iBAAiB;AAAA,IACxB;AAAA,EACF;AAAA,EAGA,oBAAoB;AAClB,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,QAAQ,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC,KAAK,KAAK;AAGlE,SAAK,mBAAmB,WAAW,OAAO,QAAM,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC;AAAA,EAC3E;AAAA,EAGA,MAAM,mBAAmB;AACvB,QAAI,KAAK,QAAQ,CAAC,KAAK,UAAU;AAE/B,WAAK,iBAAiB,KAAK,gBAAgB,CAAC,KAAK,KAAK,eAAe,CAAC;AAGtE,WAAK,KAAK,UAAU;AACpB,WAAK,iBAAiB;AAEtB,YAAM,eAAe,IAAI;AACzB,WAAK,QAAQ,SAAS;AACtB,WAAK,MAAM,SAAS;AAGpB,4BAAsB,MAAM;AAC1B,aAAK,iBAAiB,KAAK,aAAa;AAAA,MAC1C,CAAC;AAED,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,eAAe,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC7F,YAAM,UAAU,KAAK,MAAM,OAAO,WAAW,OAAO;AAGpD,UAAI,KAAK,eAAe;AACtB,uBAAe,KAAK,eAAe,KAAK,SAAS,YAAY,MAAM;AAAA,MACrE;AAEA,WAAK,KAAK,gBAAgB;AAAA,IAC5B,OAAO;AAEL,WAAK,KAAK,UAAU;AACpB,WAAK,oBAAoB;AAEzB,YAAM,eAAe,IAAI;AACzB,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,eAAe,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC7F,YAAM,UAAU,KAAK,MAAM,OAAO,WAAW,OAAO;AACpD,WAAK,QAAQ,SAAS;AACtB,WAAK,MAAM,SAAS;AAEpB,WAAK,KAAK,gBAAgB;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ,KAAK,UAAU;AAC9B,WAAK,OAAO;AACZ,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,QAAQ,KAAK,UAAU;AAC/B,WAAK,OAAO;AACZ,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA,EAGA,gBAAgB;AACd,WAAO,KAAK,WAAW,cAAc;AAAA,EACvC;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAAiB;AACf,WAAO,KAAK,WAAW,eAAe;AAAA,EACxC;AAAA;AAAA,EAGA,kBAAkB,SAAiB;AACjC,SAAK,WAAW,kBAAkB,OAAO;AACzC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,aAAa,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,aAAa,KAAK;AAAA,EACzB;AAAA,EAEA,SAAS;AACP,UAAM,eAAe,KAAK,kBAAkB,KAAK,OAAO;AACxD,UAAM,kBAAkB,KAAK,kBAAkB,KAAK,WAAW;AAC/D,UAAM,WAAW,KAAK,QAAQ,OAAO,CAAC,CAAC;AACvC,UAAM,cAAc,KAAK,WAAW,OAAO,CAAC,CAAC;AAC7C,UAAM,eAAe,KAAK,aAAa,CAAC,KAAK,YAAY,KAAK,MAAM,SAAS;AAC7E,UAAM,uBAAuB,KAAK,eAAe,KAAK,MAAM,WAAW;AAEvE,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,uBAAuB,KAAK,SAAS;AAAA,MACrC,wBAAwB,KAAK,SAAS;AAAA,MACtC,uBAAuB,KAAK,SAAS;AAAA,MACrC,2BAA2B;AAAA,MAC3B,+BAA+B;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMc,WAAW,UAAU,MAAM;AAAA,mBAChC,KAAK,gBAAgB;AAAA;AAAA,+BAET,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKrB,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,gBAAgB,KAAK;AAAA,MACrB,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,+BAA+B;AAAA,MAC/B,eAAe,KAAK,cAAc;AAAA,MAClC,kBAAkB,KAAK,cAAc;AAAA,MACrC,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,IACjC,CAAC,CAAC;AAAA,wBACU,KAAK,SAAS;AAAA,uBACf,KAAK,QAAQ,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAW/B,KAAK,qBAAqB;AAAA,2BACxB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAQzB,KAAK,WAAW;AAAA,4BAClB,KAAK,QAAQ;AAAA,yBAChB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMV,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA;AAAA,gCAG5B,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,yBAIvC,KAAK,WAAW;AAAA,wBACjB,KAAK,UAAU;AAAA;AAAA;AAAA,gBAGvB,KAAK,WAAW,6CAA6C,KAAK,IAAI,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKvE,KAAK,QAAQ;AAAA,4BACb,KAAK,QAAQ;AAAA,yBAChB,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,IAAI,KAAK,KAAK;AAAA;AAAA;AAAA,yBAG9D,MAAM,KAAK,MAAM,CAAC;AAAA,2BAChB,KAAK,aAAa;AAAA;AAAA;AAAA,gBAG7B,eACE;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKiB,KAAK,SAAS,KAAK,YAAY,CAAC;AAAA,mCAChC,KAAK,oBAAoB;AAAA,+BAC7B,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQlC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAUU,KAAK,OAAO,SAAS,OAAO;AAAA,qCACrB,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yBAK5C,KAAK,iBAAiB;AAAA,4BACnB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWhC,cAAc,UAAU,MAAM;AAAA;AAAA,mCAEnB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9C;AACF;AAlzBqB,UACZ,SAAyB,CAAC,0BAAiB,6BAAmB,uBAAQ,oCAAyB,4BAAY;AAD/F,UAEZ,eAAe;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,WAAW;AACb;AAWkB;AAAA,EAAjB,MAAM,SAAS;AAAA,GAjBG,UAiBD;AACU;AAAA,EAA3B,MAAM,mBAAmB;AAAA,GAlBP,UAkBS;AACK;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GAnBZ,UAmBc;AACF;AAAA,EAA9B,MAAM,sBAAsB;AAAA,GApBV,UAoBY;AACJ;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GArBN,UAqBQ;AAEV;AAAA,EAAhB,MAAM;AAAA,GAvBY,UAuBF;AACR;AAAA,EAAR,MAAM;AAAA,GAxBY,UAwBV;AACA;AAAA,EAAR,MAAM;AAAA,GAzBY,UAyBV;AACA;AAAA,EAAR,MAAM;AAAA,GA1BY,UA0BV;AAGG;AAAA,EAAX,SAAS;AAAA,GA7BS,UA6BP;AAaZ;AAAA,EANC,SAAS;AAAA,IACR,WAAW;AAAA,MACT,eAAe,CAAC,UAAkB,MAAM,MAAM,GAAG;AAAA,MACjD,aAAa,CAAC,UAAoB,MAAM,KAAK,GAAG;AAAA,IAClD;AAAA,EACF,CAAC;AAAA,GAzCkB,UA0CnB;AAGgB;AAAA,EAAf,aAAa;AAAA,GA7CK,UA6CH;AAGa;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAhDR,UAgDU;AAGjB;AAAA,EAAX,SAAS;AAAA,GAnDS,UAmDP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtDvB,UAsDyB;AAMkB;AAAA,EAA7D,SAAS,EAAE,WAAW,uBAAuB,MAAM,OAAO,CAAC;AAAA,GA5DzC,UA4D2C;AAGlB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/DvB,UA+DyB;AAGf;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAlER,UAkEU;AAMe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAxEvB,UAwEyB;AAMf;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA9ER,UA8EU;AAGjB;AAAA,EAAX,SAAS;AAAA,GAjFS,UAiFP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvFR,UAuFU;AAGS;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GA1FjB,UA0FmB;AAOT;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAjGR,UAiGU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApGvB,UAoGyB;AAOhC;AAAA,EAAX,SAAS;AAAA,GA3GS,UA2GP;AA+bZ;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAziB9B,UA0iBnB;AASA;AAAA,EADC,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAljB3B,UAmjBnB;AASM;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3jB1B,UA4jBb;AAwPR,oBAAoB,eAAe;AAAA,EACjC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,IACzB,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,EACzB;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAO;AAC3C,CAAC;AAED,oBAAoB,eAAe;AAAA,EACjC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,IACvB,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,EAC3B;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAO;AAC3C,CAAC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/menu/menu.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n const target = event.composedPath().find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n if (!target) return;\n\n // This isn't true. But we use it for TypeScript checks below.\n const item = target as SynMenuItem;\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('syn-select', { detail: { item } });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter or space\n if (event.key === 'Enter' || event.key === ' ') {\n const item = this.getCurrentItem();\n event.preventDefault();\n event.stopPropagation();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Move the selection when pressing down or up\n else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n event.stopPropagation();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as SynMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'syn-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }) as SynMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: SynMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n render() {\n return html`\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|