@synergy-design-system/components 2.5.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.236RSW67.js +29 -0
- package/dist/chunks/chunk.236RSW67.js.map +7 -0
- package/dist/chunks/chunk.277APOW3.js +277 -0
- package/dist/chunks/chunk.277APOW3.js.map +7 -0
- package/dist/chunks/chunk.2DWAWNCX.js +12 -0
- package/dist/chunks/chunk.2DWAWNCX.js.map +7 -0
- package/dist/chunks/{chunk.QNDC5KWA.js → chunk.2GFK6XTO.js} +17 -13
- package/dist/chunks/{chunk.DCWG25RX.js → chunk.2H5VZMM6.js} +6 -6
- package/dist/chunks/{chunk.5BDQUWIH.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.HPWFMICA.js → chunk.3BYNCSYI.js} +10 -8
- package/dist/chunks/chunk.3BYNCSYI.js.map +7 -0
- package/dist/chunks/{chunk.SN6A7VBJ.js → chunk.3TAWE2BI.js} +2 -2
- package/dist/chunks/{chunk.SOVF26GR.js → chunk.3TEIFNRP.js} +9 -9
- package/dist/chunks/{chunk.CZISOWFR.js → chunk.4WDBHKEV.js} +9 -12
- package/dist/chunks/{chunk.CZISOWFR.js.map → chunk.4WDBHKEV.js.map} +1 -1
- package/dist/chunks/{chunk.GCVGZHJK.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.POXDBLOS.js → chunk.5WTYMY7E.js} +6 -6
- package/dist/chunks/{chunk.3442R447.js → chunk.6I4QZHQ6.js} +4 -4
- package/dist/chunks/{chunk.3442R447.js.map → chunk.6I4QZHQ6.js.map} +2 -2
- package/dist/chunks/{chunk.26PVORV4.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.REXNHEPD.js → chunk.72KEPLD4.js} +2 -2
- package/dist/chunks/{chunk.QJMO7V5R.js → chunk.74IOULXM.js} +2 -2
- package/dist/chunks/{chunk.7TOZAZTA.js → chunk.7B5QDYTK.js} +11 -15
- package/dist/chunks/chunk.7B5QDYTK.js.map +7 -0
- package/dist/chunks/{chunk.XY7PAA7K.js → chunk.7GVODRHO.js} +2 -2
- package/dist/chunks/{chunk.BZ7DXEKT.js → chunk.7I5Q3H5W.js} +2 -2
- package/dist/chunks/{chunk.2LACXU5F.js → chunk.7J54DP5U.js} +2 -2
- package/dist/chunks/{chunk.APPDW65F.js → chunk.7YRTMCIL.js} +21 -21
- package/dist/chunks/chunk.7YRTMCIL.js.map +7 -0
- package/dist/chunks/{chunk.MLOZ4D3V.js → chunk.A3OYJILJ.js} +2 -2
- package/dist/chunks/{chunk.VCCPDP5S.js → chunk.A7S3RARM.js} +2 -2
- package/dist/chunks/{chunk.QBVLTYU7.js → chunk.BBNQVEPD.js} +3 -4
- package/dist/chunks/{chunk.QBVLTYU7.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.4VJLNO6Y.js → chunk.BHYMSPYR.js} +5 -5
- package/dist/chunks/{chunk.VI6PYB5C.js → chunk.CHG7CKU3.js} +6 -6
- package/dist/chunks/{chunk.IOTJRIT5.js → chunk.CSEYI4PC.js} +2 -2
- package/dist/chunks/{chunk.A45QGUNM.js → chunk.D23EOBAA.js} +2 -2
- package/dist/chunks/{chunk.7INB3LU4.js → chunk.D5J4VTCV.js} +2 -2
- package/dist/chunks/{chunk.OP4WTQ2R.js → chunk.DGSAPH64.js} +8 -8
- package/dist/chunks/{chunk.CG7HK3HS.js → chunk.DKGNY4YS.js} +12 -12
- package/dist/chunks/chunk.DKGNY4YS.js.map +7 -0
- package/dist/chunks/{chunk.W2474HMX.js → chunk.DRLBTO2U.js} +4 -6
- package/dist/chunks/{chunk.W2474HMX.js.map → chunk.DRLBTO2U.js.map} +1 -1
- package/dist/chunks/{chunk.HLRZHIBP.js → chunk.DVF5JNGN.js} +2 -2
- package/dist/chunks/{chunk.SIADSRVP.js → chunk.DZSCTRUT.js} +2 -2
- package/dist/chunks/{chunk.XBHV2RZS.js → chunk.ECTOUABW.js} +7 -7
- package/dist/chunks/{chunk.ZTEMBLJH.js → chunk.ESQAXAFE.js} +2 -2
- package/dist/chunks/{chunk.ZTEMBLJH.js.map → chunk.ESQAXAFE.js.map} +1 -1
- package/dist/chunks/{chunk.MO5THLW3.js → chunk.EUQCLKVZ.js} +5 -5
- package/dist/chunks/{chunk.MO5THLW3.js.map → chunk.EUQCLKVZ.js.map} +1 -1
- package/dist/chunks/{chunk.HVJGBGHT.js → chunk.EZRPX4D7.js} +4 -4
- package/dist/chunks/{chunk.EG23UW3V.js → chunk.FK6MAJIJ.js} +4 -4
- package/dist/chunks/{chunk.HLE65RI4.js → chunk.FKKJBKYL.js} +2 -4
- package/dist/chunks/{chunk.HLE65RI4.js.map → chunk.FKKJBKYL.js.map} +2 -2
- package/dist/chunks/{chunk.RSPZU72C.js → chunk.FP4J6SI7.js} +3 -3
- package/dist/chunks/{chunk.TCGQ6I55.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.JSPLWE2A.js → chunk.GHGGBS4N.js} +6 -7
- package/dist/chunks/{chunk.JSPLWE2A.js.map → chunk.GHGGBS4N.js.map} +2 -2
- package/dist/chunks/{chunk.445GTYI7.js → chunk.GWQWHDLF.js} +3 -3
- package/dist/chunks/{chunk.MSUX23ZJ.js → chunk.HQ6QUSK7.js} +2 -2
- package/dist/chunks/{chunk.R6VT7GM5.js → chunk.HTRLN6MZ.js} +2 -2
- package/dist/chunks/{chunk.P7GNMVZ4.js → chunk.HY4Y3IF2.js} +4 -4
- package/dist/chunks/chunk.I6YARDHH.js +39 -0
- package/dist/chunks/chunk.I6YARDHH.js.map +7 -0
- package/dist/chunks/{chunk.36WNAWGH.js → chunk.IGLR5WAI.js} +2 -2
- package/dist/chunks/{chunk.OZ7PQTHB.js → chunk.IL3FC72M.js} +11 -11
- package/dist/chunks/{chunk.ML6NOYHV.js → chunk.IMXRJ3YT.js} +2 -2
- package/dist/chunks/{chunk.RUUKH7KZ.js → chunk.J6AAV3AV.js} +2 -2
- package/dist/chunks/chunk.JGJFNG7J.js +636 -0
- package/dist/chunks/chunk.JGJFNG7J.js.map +7 -0
- package/dist/chunks/{chunk.U2OMGNNZ.js → chunk.JNP34M27.js} +7 -6
- package/dist/chunks/chunk.JNP34M27.js.map +7 -0
- package/dist/chunks/{chunk.EPEJDXFO.js → chunk.JS5QB2ZL.js} +8 -8
- package/dist/chunks/{chunk.BWVISANJ.js → chunk.JTYYYMG2.js} +9 -5
- package/dist/chunks/{chunk.BWVISANJ.js.map → chunk.JTYYYMG2.js.map} +2 -2
- package/dist/chunks/{chunk.ZHDP4GU5.js → chunk.JWDKROBJ.js} +2 -2
- package/dist/chunks/{chunk.TVIXZRR6.js → chunk.KSPAGGI2.js} +3 -3
- package/dist/chunks/{chunk.RQ6PQ76D.js → chunk.LBU676EZ.js} +4 -4
- package/dist/chunks/{chunk.TD2KXBBJ.js → chunk.LO6TVTD5.js} +2 -2
- package/dist/chunks/{chunk.C66PDYUI.js → chunk.LXRYPCRA.js} +2 -2
- package/dist/chunks/chunk.LYDJ5XK6.js +49 -0
- package/dist/chunks/chunk.LYDJ5XK6.js.map +7 -0
- package/dist/chunks/{chunk.MAWKXH6T.js → chunk.M322AHXQ.js} +5 -5
- package/dist/chunks/{chunk.4VP6SOMT.js → chunk.MJIGVGWT.js} +2 -2
- package/dist/chunks/{chunk.UKK7UB66.js → chunk.MJODVYOU.js} +2 -2
- package/dist/chunks/{chunk.AUQVJZEW.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.LQZJ6SLT.js → chunk.OGY5SV3K.js} +2 -2
- package/dist/chunks/{chunk.Y4PC4NYJ.js → chunk.ORSZM73W.js} +2 -2
- package/dist/chunks/{chunk.VNOGO2PS.js → chunk.PCNJFBUE.js} +2 -2
- package/dist/chunks/{chunk.MQH2OOTN.js → chunk.PLD6HW4G.js} +2 -2
- package/dist/chunks/{chunk.OAD4GL57.js → chunk.QTUPZKVS.js} +2 -2
- package/dist/chunks/{chunk.BCM6GF47.js → chunk.R2WZYDE2.js} +2 -2
- package/dist/chunks/{chunk.JD6HMTL2.js → chunk.R67XSTNW.js} +9 -9
- package/dist/chunks/{chunk.HRU52NH5.js → chunk.RFJ2QHB5.js} +2 -2
- package/dist/chunks/{chunk.GZQPS6JH.js → chunk.RKZLWXOJ.js} +4 -4
- package/dist/chunks/{chunk.PGDHCGHK.js → chunk.RQA3KF7H.js} +12 -6
- package/dist/chunks/chunk.RQA3KF7H.js.map +7 -0
- package/dist/chunks/{chunk.VREBZRBU.js → chunk.TLNHPNZP.js} +2 -2
- package/dist/chunks/{chunk.THRSQDCW.js → chunk.TNX42WV4.js} +2 -2
- package/dist/chunks/chunk.TOMRCFI4.js +12 -0
- package/dist/chunks/chunk.TOMRCFI4.js.map +7 -0
- package/dist/chunks/{chunk.COI5VNKC.js → chunk.TQCA6Q6L.js} +4 -4
- package/dist/chunks/{chunk.QVULMTSN.js → chunk.TWPYJVSU.js} +8 -8
- package/dist/chunks/{chunk.M4PJZ2KX.js → chunk.TYV5CM4I.js} +56 -28
- package/dist/chunks/chunk.TYV5CM4I.js.map +7 -0
- package/dist/chunks/{chunk.A3TUOOXV.js → chunk.UANQP7UZ.js} +2 -2
- package/dist/chunks/{chunk.MZO2W4AG.js → chunk.UXGBQPTV.js} +2 -2
- package/dist/chunks/{chunk.BCAT6PJO.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.2JGMDXJX.js → chunk.VQNVZMWW.js} +8 -10
- package/dist/chunks/{chunk.2JGMDXJX.js.map → chunk.VQNVZMWW.js.map} +1 -1
- package/dist/chunks/{chunk.KPEDDAR4.js → chunk.VQWI7RF7.js} +18 -18
- package/dist/chunks/chunk.VQWI7RF7.js.map +7 -0
- package/dist/chunks/{chunk.AA7ETQ6Z.js → chunk.W4DRGBOX.js} +10 -10
- package/dist/chunks/{chunk.6ZMQFRAK.js → chunk.WJG5I5EW.js} +2 -2
- package/dist/chunks/{chunk.CCBYOE35.js → chunk.X5ZOIEXZ.js} +2 -2
- package/dist/chunks/{chunk.PMC3VAD6.js → chunk.XDM6VD32.js} +6 -10
- package/dist/chunks/{chunk.PMC3VAD6.js.map → chunk.XDM6VD32.js.map} +1 -1
- package/dist/chunks/{chunk.OUSXEKQG.js → chunk.XNGZHSRO.js} +8 -12
- package/dist/chunks/{chunk.OUSXEKQG.js.map → chunk.XNGZHSRO.js.map} +1 -1
- package/dist/chunks/{chunk.6N5IAYT2.js → chunk.XOSZV7Y4.js} +2 -2
- package/dist/chunks/{chunk.6EHHOHBG.js → chunk.Y5BGNU6P.js} +2 -2
- package/dist/chunks/{chunk.S2UI5DQ6.js → chunk.YARCDSSP.js} +2 -2
- package/dist/chunks/{chunk.QVNMCS3Y.js → chunk.YGBYTIEC.js} +2 -2
- package/dist/chunks/{chunk.WEUMPGAL.js → chunk.YMC6ML2J.js} +2 -2
- package/dist/chunks/{chunk.ZXLXQMJJ.js → chunk.YVPJSA6G.js} +4 -4
- package/dist/chunks/{chunk.4U4U4WYP.js → chunk.YXKAU762.js} +2 -2
- package/dist/chunks/{chunk.GOXWNSOG.js → chunk.Z2AJQ6S4.js} +4 -5
- package/dist/chunks/{chunk.GOXWNSOG.js.map → chunk.Z2AJQ6S4.js.map} +2 -2
- package/dist/chunks/{chunk.XD3FB2XT.js → chunk.ZIJ6OGAT.js} +8 -8
- package/dist/chunks/{chunk.T4MHUMBJ.js → chunk.ZRQDODBI.js} +9 -9
- package/dist/chunks/{chunk.OE4RXQU2.js → chunk.ZW75HBAK.js} +3 -3
- package/dist/chunks/chunk.ZW75HBAK.js.map +7 -0
- package/dist/chunks/{chunk.LAKJ5MK2.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 +7 -7
- package/dist/components/checkbox/checkbox.custom.styles.js +1 -1
- package/dist/components/checkbox/checkbox.js +8 -8
- 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 +13 -13
- package/dist/components/file/file.js +14 -14
- 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 +10 -10
- package/dist/components/input/input.custom.styles.js +1 -1
- package/dist/components/input/input.js +11 -11
- 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 +7 -7
- package/dist/components/radio-group/radio-group.custom.styles.js +1 -1
- package/dist/components/radio-group/radio-group.js +8 -8
- package/dist/components/radio-group/radio-group.styles.js +1 -1
- package/dist/components/range/range.component.d.ts +125 -0
- package/dist/components/range/range.component.js +26 -0
- package/dist/components/range/range.component.js.map +7 -0
- package/dist/components/range/range.d.ts +8 -0
- package/dist/components/range/range.js +27 -0
- package/dist/components/range/range.js.map +7 -0
- package/dist/components/range/range.styles.d.ts +2 -0
- package/dist/components/range/range.styles.js +8 -0
- package/dist/components/range/range.styles.js.map +7 -0
- package/dist/components/range/utility.d.ts +9 -0
- package/dist/components/range/utility.js +12 -0
- package/dist/components/range/utility.js.map +7 -0
- package/dist/components/range-tick/range-tick.component.d.ts +24 -0
- package/dist/components/range-tick/range-tick.component.js +10 -0
- package/dist/components/range-tick/range-tick.component.js.map +7 -0
- package/dist/components/range-tick/range-tick.d.ts +8 -0
- package/dist/components/range-tick/range-tick.js +11 -0
- package/dist/components/range-tick/range-tick.js.map +7 -0
- package/dist/components/range-tick/range-tick.styles.d.ts +2 -0
- package/dist/components/range-tick/range-tick.styles.js +8 -0
- package/dist/components/range-tick/range-tick.styles.js.map +7 -0
- package/dist/components/select/select.component.d.ts +3 -1
- package/dist/components/select/select.component.js +17 -17
- package/dist/components/select/select.custom.styles.js +2 -2
- package/dist/components/select/select.js +18 -18
- 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 +6 -6
- package/dist/components/switch/switch.custom.styles.js +1 -1
- package/dist/components/switch/switch.js +7 -7
- 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 +6 -6
- package/dist/components/textarea/textarea.custom.styles.js +1 -1
- package/dist/components/textarea/textarea.js +7 -7
- 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 +1050 -205
- package/dist/events/events.d.ts +1 -0
- package/dist/events/syn-move.d.ts +9 -0
- package/dist/internal/animate.d.ts +3 -3
- package/dist/internal/longpress.d.ts +0 -1
- package/dist/styles/fouc.css +2 -0
- package/dist/styles/index.css +7 -2
- package/dist/styles/utility.css +4 -1
- package/dist/synergy-autoloader.js +1 -1
- package/dist/synergy.d.ts +2 -0
- package/dist/synergy.js +128 -115
- package/dist/translations/de.js +8 -9
- package/dist/translations/de.js.map +2 -2
- 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.d.ts +2 -0
- package/dist/utilities/localize.js +3 -3
- package/dist/vscode.html-custom-data.json +95 -3
- package/package.json +33 -33
- package/dist/chunks/chunk.6UAOF7WN.js.map +0 -7
- package/dist/chunks/chunk.7TOZAZTA.js.map +0 -7
- package/dist/chunks/chunk.APPDW65F.js.map +0 -7
- package/dist/chunks/chunk.CG7HK3HS.js.map +0 -7
- package/dist/chunks/chunk.HPWFMICA.js.map +0 -7
- package/dist/chunks/chunk.KPEDDAR4.js.map +0 -7
- package/dist/chunks/chunk.M4PJZ2KX.js.map +0 -7
- package/dist/chunks/chunk.OE4RXQU2.js.map +0 -7
- package/dist/chunks/chunk.PGDHCGHK.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.QNDC5KWA.js.map → chunk.2GFK6XTO.js.map} +0 -0
- /package/dist/chunks/{chunk.DCWG25RX.js.map → chunk.2H5VZMM6.js.map} +0 -0
- /package/dist/chunks/{chunk.5BDQUWIH.js.map → chunk.2RCFWUMX.js.map} +0 -0
- /package/dist/chunks/{chunk.SN6A7VBJ.js.map → chunk.3TAWE2BI.js.map} +0 -0
- /package/dist/chunks/{chunk.SOVF26GR.js.map → chunk.3TEIFNRP.js.map} +0 -0
- /package/dist/chunks/{chunk.GCVGZHJK.js.map → chunk.4ZABXKYI.js.map} +0 -0
- /package/dist/chunks/{chunk.POXDBLOS.js.map → chunk.5WTYMY7E.js.map} +0 -0
- /package/dist/chunks/{chunk.26PVORV4.js.map → chunk.6OCJR2YI.js.map} +0 -0
- /package/dist/chunks/{chunk.REXNHEPD.js.map → chunk.72KEPLD4.js.map} +0 -0
- /package/dist/chunks/{chunk.QJMO7V5R.js.map → chunk.74IOULXM.js.map} +0 -0
- /package/dist/chunks/{chunk.XY7PAA7K.js.map → chunk.7GVODRHO.js.map} +0 -0
- /package/dist/chunks/{chunk.BZ7DXEKT.js.map → chunk.7I5Q3H5W.js.map} +0 -0
- /package/dist/chunks/{chunk.2LACXU5F.js.map → chunk.7J54DP5U.js.map} +0 -0
- /package/dist/chunks/{chunk.MLOZ4D3V.js.map → chunk.A3OYJILJ.js.map} +0 -0
- /package/dist/chunks/{chunk.VCCPDP5S.js.map → chunk.A7S3RARM.js.map} +0 -0
- /package/dist/chunks/{chunk.4VJLNO6Y.js.map → chunk.BHYMSPYR.js.map} +0 -0
- /package/dist/chunks/{chunk.VI6PYB5C.js.map → chunk.CHG7CKU3.js.map} +0 -0
- /package/dist/chunks/{chunk.IOTJRIT5.js.map → chunk.CSEYI4PC.js.map} +0 -0
- /package/dist/chunks/{chunk.A45QGUNM.js.map → chunk.D23EOBAA.js.map} +0 -0
- /package/dist/chunks/{chunk.7INB3LU4.js.map → chunk.D5J4VTCV.js.map} +0 -0
- /package/dist/chunks/{chunk.OP4WTQ2R.js.map → chunk.DGSAPH64.js.map} +0 -0
- /package/dist/chunks/{chunk.HLRZHIBP.js.map → chunk.DVF5JNGN.js.map} +0 -0
- /package/dist/chunks/{chunk.SIADSRVP.js.map → chunk.DZSCTRUT.js.map} +0 -0
- /package/dist/chunks/{chunk.XBHV2RZS.js.map → chunk.ECTOUABW.js.map} +0 -0
- /package/dist/chunks/{chunk.HVJGBGHT.js.map → chunk.EZRPX4D7.js.map} +0 -0
- /package/dist/chunks/{chunk.EG23UW3V.js.map → chunk.FK6MAJIJ.js.map} +0 -0
- /package/dist/chunks/{chunk.RSPZU72C.js.map → chunk.FP4J6SI7.js.map} +0 -0
- /package/dist/chunks/{chunk.TCGQ6I55.js.map → chunk.FPIGVZSR.js.map} +0 -0
- /package/dist/chunks/{chunk.445GTYI7.js.map → chunk.GWQWHDLF.js.map} +0 -0
- /package/dist/chunks/{chunk.MSUX23ZJ.js.map → chunk.HQ6QUSK7.js.map} +0 -0
- /package/dist/chunks/{chunk.R6VT7GM5.js.map → chunk.HTRLN6MZ.js.map} +0 -0
- /package/dist/chunks/{chunk.P7GNMVZ4.js.map → chunk.HY4Y3IF2.js.map} +0 -0
- /package/dist/chunks/{chunk.36WNAWGH.js.map → chunk.IGLR5WAI.js.map} +0 -0
- /package/dist/chunks/{chunk.OZ7PQTHB.js.map → chunk.IL3FC72M.js.map} +0 -0
- /package/dist/chunks/{chunk.ML6NOYHV.js.map → chunk.IMXRJ3YT.js.map} +0 -0
- /package/dist/chunks/{chunk.RUUKH7KZ.js.map → chunk.J6AAV3AV.js.map} +0 -0
- /package/dist/chunks/{chunk.EPEJDXFO.js.map → chunk.JS5QB2ZL.js.map} +0 -0
- /package/dist/chunks/{chunk.ZHDP4GU5.js.map → chunk.JWDKROBJ.js.map} +0 -0
- /package/dist/chunks/{chunk.TVIXZRR6.js.map → chunk.KSPAGGI2.js.map} +0 -0
- /package/dist/chunks/{chunk.RQ6PQ76D.js.map → chunk.LBU676EZ.js.map} +0 -0
- /package/dist/chunks/{chunk.TD2KXBBJ.js.map → chunk.LO6TVTD5.js.map} +0 -0
- /package/dist/chunks/{chunk.C66PDYUI.js.map → chunk.LXRYPCRA.js.map} +0 -0
- /package/dist/chunks/{chunk.MAWKXH6T.js.map → chunk.M322AHXQ.js.map} +0 -0
- /package/dist/chunks/{chunk.4VP6SOMT.js.map → chunk.MJIGVGWT.js.map} +0 -0
- /package/dist/chunks/{chunk.UKK7UB66.js.map → chunk.MJODVYOU.js.map} +0 -0
- /package/dist/chunks/{chunk.AUQVJZEW.js.map → chunk.NRKWWLOJ.js.map} +0 -0
- /package/dist/chunks/{chunk.LQZJ6SLT.js.map → chunk.OGY5SV3K.js.map} +0 -0
- /package/dist/chunks/{chunk.Y4PC4NYJ.js.map → chunk.ORSZM73W.js.map} +0 -0
- /package/dist/chunks/{chunk.VNOGO2PS.js.map → chunk.PCNJFBUE.js.map} +0 -0
- /package/dist/chunks/{chunk.MQH2OOTN.js.map → chunk.PLD6HW4G.js.map} +0 -0
- /package/dist/chunks/{chunk.OAD4GL57.js.map → chunk.QTUPZKVS.js.map} +0 -0
- /package/dist/chunks/{chunk.BCM6GF47.js.map → chunk.R2WZYDE2.js.map} +0 -0
- /package/dist/chunks/{chunk.JD6HMTL2.js.map → chunk.R67XSTNW.js.map} +0 -0
- /package/dist/chunks/{chunk.HRU52NH5.js.map → chunk.RFJ2QHB5.js.map} +0 -0
- /package/dist/chunks/{chunk.GZQPS6JH.js.map → chunk.RKZLWXOJ.js.map} +0 -0
- /package/dist/chunks/{chunk.VREBZRBU.js.map → chunk.TLNHPNZP.js.map} +0 -0
- /package/dist/chunks/{chunk.THRSQDCW.js.map → chunk.TNX42WV4.js.map} +0 -0
- /package/dist/chunks/{chunk.COI5VNKC.js.map → chunk.TQCA6Q6L.js.map} +0 -0
- /package/dist/chunks/{chunk.QVULMTSN.js.map → chunk.TWPYJVSU.js.map} +0 -0
- /package/dist/chunks/{chunk.A3TUOOXV.js.map → chunk.UANQP7UZ.js.map} +0 -0
- /package/dist/chunks/{chunk.MZO2W4AG.js.map → chunk.UXGBQPTV.js.map} +0 -0
- /package/dist/chunks/{chunk.BCAT6PJO.js.map → chunk.V5VKAR7I.js.map} +0 -0
- /package/dist/chunks/{chunk.AA7ETQ6Z.js.map → chunk.W4DRGBOX.js.map} +0 -0
- /package/dist/chunks/{chunk.6ZMQFRAK.js.map → chunk.WJG5I5EW.js.map} +0 -0
- /package/dist/chunks/{chunk.CCBYOE35.js.map → chunk.X5ZOIEXZ.js.map} +0 -0
- /package/dist/chunks/{chunk.6N5IAYT2.js.map → chunk.XOSZV7Y4.js.map} +0 -0
- /package/dist/chunks/{chunk.6EHHOHBG.js.map → chunk.Y5BGNU6P.js.map} +0 -0
- /package/dist/chunks/{chunk.S2UI5DQ6.js.map → chunk.YARCDSSP.js.map} +0 -0
- /package/dist/chunks/{chunk.QVNMCS3Y.js.map → chunk.YGBYTIEC.js.map} +0 -0
- /package/dist/chunks/{chunk.WEUMPGAL.js.map → chunk.YMC6ML2J.js.map} +0 -0
- /package/dist/chunks/{chunk.ZXLXQMJJ.js.map → chunk.YVPJSA6G.js.map} +0 -0
- /package/dist/chunks/{chunk.4U4U4WYP.js.map → chunk.YXKAU762.js.map} +0 -0
- /package/dist/chunks/{chunk.XD3FB2XT.js.map → chunk.ZIJ6OGAT.js.map} +0 -0
- /package/dist/chunks/{chunk.T4MHUMBJ.js.map → chunk.ZRQDODBI.js.map} +0 -0
- /package/dist/chunks/{chunk.LAKJ5MK2.js.map → chunk.ZWKWTOIU.js.map} +0 -0
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
import "../chunks/chunk.YTEJW7IF.js";
|
|
7
7
|
import "../chunks/chunk.AINKZEUX.js";
|
|
8
8
|
import "../chunks/chunk.234ERFCE.js";
|
|
9
|
-
import "../chunks/chunk.
|
|
9
|
+
import "../chunks/chunk.2GFK6XTO.js";
|
|
10
10
|
export {
|
|
11
11
|
registerIconLibrary,
|
|
12
12
|
unregisterIconLibrary
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LocalizeController,
|
|
3
3
|
registerTranslation
|
|
4
|
-
} from "../chunks/chunk.
|
|
5
|
-
import "../chunks/chunk.
|
|
6
|
-
import "../chunks/chunk.
|
|
4
|
+
} from "../chunks/chunk.ESQAXAFE.js";
|
|
5
|
+
import "../chunks/chunk.GHGGBS4N.js";
|
|
6
|
+
import "../chunks/chunk.2GFK6XTO.js";
|
|
7
7
|
export {
|
|
8
8
|
LocalizeController,
|
|
9
9
|
registerTranslation
|
|
@@ -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",
|
|
@@ -1448,9 +1448,101 @@
|
|
|
1448
1448
|
}
|
|
1449
1449
|
]
|
|
1450
1450
|
},
|
|
1451
|
+
{
|
|
1452
|
+
"name": "syn-range",
|
|
1453
|
+
"description": "Ranges allow the user to select values within a given range using one or two thumbs.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\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- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the range.\n- **suffix** - Used to append a presentational icon or similar element to the range.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of a thumb. _(default: undefined)_\n- **--thumb-hit-area-size** - The clickable area around the thumb. Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4). _(default: undefined)_\n- **--track-hit-area-size** - The clickable area around the track (top and left). _(default: undefined)_\n- **--track-color-active** - Color of the track representing the current value. _(default: undefined)_\n- **--track-color-inactive** - Color of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\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-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **ticks** - The container that wraps the tick marks.\n- **thumb** - The thumb(s) that the user can drag to change the range.",
|
|
1454
|
+
"attributes": [
|
|
1455
|
+
{
|
|
1456
|
+
"name": "name",
|
|
1457
|
+
"description": "The name of the range, submitted as a name/value pair with form data.",
|
|
1458
|
+
"values": []
|
|
1459
|
+
},
|
|
1460
|
+
{
|
|
1461
|
+
"name": "label",
|
|
1462
|
+
"description": "The range's label. If you need to display HTML, use the `label` slot instead.",
|
|
1463
|
+
"values": []
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"name": "help-text",
|
|
1467
|
+
"description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
|
|
1468
|
+
"values": []
|
|
1469
|
+
},
|
|
1470
|
+
{
|
|
1471
|
+
"name": "disabled",
|
|
1472
|
+
"description": "Disables the range.",
|
|
1473
|
+
"values": []
|
|
1474
|
+
},
|
|
1475
|
+
{
|
|
1476
|
+
"name": "min",
|
|
1477
|
+
"description": "The minimum acceptable value of the range.",
|
|
1478
|
+
"values": []
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
"name": "max",
|
|
1482
|
+
"description": "The maximum acceptable value of the range.",
|
|
1483
|
+
"values": []
|
|
1484
|
+
},
|
|
1485
|
+
{
|
|
1486
|
+
"name": "step",
|
|
1487
|
+
"description": "The interval at which the range will increase and decrease.",
|
|
1488
|
+
"values": []
|
|
1489
|
+
},
|
|
1490
|
+
{
|
|
1491
|
+
"name": "size",
|
|
1492
|
+
"description": "The range's size.",
|
|
1493
|
+
"values": [
|
|
1494
|
+
{ "name": "small" },
|
|
1495
|
+
{ "name": "medium" },
|
|
1496
|
+
{ "name": "large" }
|
|
1497
|
+
]
|
|
1498
|
+
},
|
|
1499
|
+
{
|
|
1500
|
+
"name": "tooltip-placement",
|
|
1501
|
+
"description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
|
|
1502
|
+
"values": [
|
|
1503
|
+
{ "name": "top" },
|
|
1504
|
+
{ "name": "bottom" },
|
|
1505
|
+
{ "name": "none" }
|
|
1506
|
+
]
|
|
1507
|
+
},
|
|
1508
|
+
{
|
|
1509
|
+
"name": "value",
|
|
1510
|
+
"description": "The current values of the input (in ascending order) as a string of space separated values",
|
|
1511
|
+
"values": []
|
|
1512
|
+
},
|
|
1513
|
+
{
|
|
1514
|
+
"name": "form",
|
|
1515
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
|
|
1516
|
+
"values": []
|
|
1517
|
+
}
|
|
1518
|
+
],
|
|
1519
|
+
"references": [
|
|
1520
|
+
{
|
|
1521
|
+
"name": "Documentation",
|
|
1522
|
+
"url": "https://synergy.style/components/range"
|
|
1523
|
+
}
|
|
1524
|
+
]
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
"name": "syn-range-tick",
|
|
1528
|
+
"description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--tick-height** - The height of the tick marker. _(default: undefined)_\n- **--tick-label-top** - The top offset of the tick label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
|
|
1529
|
+
"attributes": [
|
|
1530
|
+
{
|
|
1531
|
+
"name": "subdivision",
|
|
1532
|
+
"description": "Whether the tick should be shown as a subdivision.",
|
|
1533
|
+
"values": []
|
|
1534
|
+
}
|
|
1535
|
+
],
|
|
1536
|
+
"references": [
|
|
1537
|
+
{
|
|
1538
|
+
"name": "Documentation",
|
|
1539
|
+
"url": "https://synergy.style/components/range-tick"
|
|
1540
|
+
}
|
|
1541
|
+
]
|
|
1542
|
+
},
|
|
1451
1543
|
{
|
|
1452
1544
|
"name": "syn-select",
|
|
1453
|
-
"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.",
|
|
1454
1546
|
"attributes": [
|
|
1455
1547
|
{
|
|
1456
1548
|
"name": "name",
|
|
@@ -1644,7 +1736,7 @@
|
|
|
1644
1736
|
},
|
|
1645
1737
|
{
|
|
1646
1738
|
"name": "syn-tab",
|
|
1647
|
-
"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.",
|
|
1648
1740
|
"attributes": [
|
|
1649
1741
|
{
|
|
1650
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/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/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/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": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio-group/radio-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 {\n customErrorValidityState,\n FormControlController,\n validValidityState,\n valueMissingValidityState\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.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 SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport customStyles from './radio-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\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 input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-button-group': SynButtonGroup };\n\n protected readonly formControlController = new FormControlController(this);\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n private validationTimeout: number;\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value = '';\n\n /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\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 /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return customErrorValidityState;\n } else if (isRequiredAndEmpty) {\n return valueMissingValidityState;\n }\n\n return validValidityState;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return this.customValidityMessage;\n } else if (isRequiredAndEmpty) {\n return this.validationInput.validationMessage;\n }\n\n return '';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (target.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.tabIndex = -1;\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].tabIndex = 0;\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private async syncRadioElements() {\n const radios = this.getAllRadios();\n\n await Promise.all(\n // Sync the checked state and size\n radios.map(async radio => {\n await radio.updateComplete;\n radio.checked = radio.value === this.value;\n radio.size = this.size;\n })\n );\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n if (radios.length > 0 && !radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n if (buttonRadio) {\n buttonRadio.tabIndex = 0;\n }\n } else {\n radios[0].tabIndex = 0;\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n if (buttonGroup) {\n buttonGroup.disableRole = true;\n }\n }\n }\n\n private syncRadios() {\n if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n return;\n }\n\n if (customElements.get('syn-radio')) {\n this.syncRadioElements();\n } else {\n customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n }\n\n if (customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n } else {\n // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.formControlController.setValidity(this.validity.valid);\n }\n\n @watch('size', { waitUntilFirstUpdate: true })\n handleSizeChange() {\n this.syncRadios();\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (isRequiredAndEmpty || hasCustomValidityMessage) {\n this.formControlController.emitInvalidEvent();\n return false;\n }\n\n return true;\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(): boolean {\n const isValid = this.validity.valid;\n\n this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n this.formControlController.setValidity(isValid);\n this.validationInput.hidden = true;\n clearTimeout(this.validationTimeout);\n\n if (!isValid) {\n // Show the browser's constraint validation message\n this.validationInput.hidden = false;\n this.validationInput.reportValidity();\n this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;\n }\n\n return isValid;\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message = '') {\n this.customValidityMessage = message;\n this.errorMessage = message;\n this.validationInput.setCustomValidity(message);\n this.formControlController.updateValidity();\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 defaultSlot = html`\n <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n `;\n\n return html`\n <fieldset\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--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"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 <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n @invalid=${this.handleInvalid}\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n ${defaultSlot}\n </syn-button-group>\n `\n : defaultSlot}\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 </fieldset>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAQzB,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAsCvC,IAAqB,gBAArB,cAA2C,eAA6C;AAAA,EAAxF;AAAA;AAIE,SAAmB,wBAAwB,IAAI,sBAAsB,IAAI;AACzE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,OAAO;AACrF,SAAQ,wBAAwB;AAMvB,SAAQ,iBAAiB;AACzB,SAAQ,eAAe;AACvB,wBAAe;AAMZ,iBAAQ;AAGkB,oBAAW;AAGrC,gBAAO;AAGU,iBAAQ;AAGR,gBAAqC;AAOrC,gBAAO;AAGQ,oBAAW;AAAA;AAAA;AAAA,EAGvD,IAAI,WAAW;AACb,UAAM,qBAAqB,KAAK,YAAY,CAAC,KAAK;AAClD,UAAM,2BAA2B,KAAK,0BAA0B;AAEhE,QAAI,0BAA0B;AAC5B,aAAO;AAAA,IACT,WAAW,oBAAoB;AAC7B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,UAAM,qBAAqB,KAAK,YAAY,CAAC,KAAK;AAClD,UAAM,2BAA2B,KAAK,0BAA0B;AAEhE,QAAI,0BAA0B;AAC5B,aAAO,KAAK;AAAA,IACd,WAAW,oBAAoB;AAC7B,aAAO,KAAK,gBAAgB;AAAA,IAC9B;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA,EAEA,eAAe;AACb,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEQ,eAAe;AACrB,WAAO,CAAC,GAAG,KAAK,iBAA4C,6BAA6B,CAAC;AAAA,EAC5F;AAAA,EAEQ,iBAAiB,OAAmB;AAC1C,UAAM,SAAU,MAAM,OAAuB,QAAmC,6BAA6B;AAC7G,UAAM,SAAS,KAAK,aAAa;AACjC,UAAM,WAAW,KAAK;AAEtB,QAAI,OAAO,UAAU;AACnB;AAAA,IACF;AAEA,SAAK,QAAQ,OAAO;AACpB,WAAO,QAAQ,WAAU,MAAM,UAAU,UAAU,MAAO;AAE1D,QAAI,KAAK,UAAU,UAAU;AAC3B,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAAA,EACF;AAAA,EAEQ,cAAc,OAAsB;AA9J9C;AA+JI,QAAI,CAAC,CAAC,WAAW,aAAa,aAAa,cAAc,GAAG,EAAE,SAAS,MAAM,GAAG,GAAG;AACjF;AAAA,IACF;AAEA,UAAM,SAAS,KAAK,aAAa,EAAE,OAAO,WAAS,CAAC,MAAM,QAAQ;AAClE,UAAM,gBAAe,YAAO,KAAK,WAAS,MAAM,OAAO,MAAlC,YAAuC,OAAO,CAAC;AACpE,UAAM,OAAO,MAAM,QAAQ,MAAM,IAAI,CAAC,WAAW,WAAW,EAAE,SAAS,MAAM,GAAG,IAAI,KAAK;AACzF,UAAM,WAAW,KAAK;AACtB,QAAI,QAAQ,OAAO,QAAQ,YAAY,IAAI;AAE3C,QAAI,QAAQ,GAAG;AACb,cAAQ,OAAO,SAAS;AAAA,IAC1B;AAEA,QAAI,QAAQ,OAAO,SAAS,GAAG;AAC7B,cAAQ;AAAA,IACV;AAEA,SAAK,aAAa,EAAE,QAAQ,WAAS;AACnC,YAAM,UAAU;AAEhB,UAAI,CAAC,KAAK,gBAAgB;AACxB,cAAM,WAAW;AAAA,MACnB;AAAA,IACF,CAAC;AAED,SAAK,QAAQ,OAAO,KAAK,EAAE;AAC3B,WAAO,KAAK,EAAE,UAAU;AAExB,QAAI,CAAC,KAAK,gBAAgB;AACxB,aAAO,KAAK,EAAE,WAAW;AACzB,aAAO,KAAK,EAAE,MAAM;AAAA,IACtB,OAAO;AACL,aAAO,KAAK,EAAE,WAAY,cAAc,QAAQ,EAAG,MAAM;AAAA,IAC3D;AAEA,QAAI,KAAK,UAAU,UAAU;AAC3B,WAAK,KAAK,YAAY;AACtB,WAAK,KAAK,WAAW;AAAA,IACvB;AAEA,UAAM,eAAe;AAAA,EACvB;AAAA,EAEQ,mBAAmB;AACzB,UAAM,SAAS,KAAK,aAAa;AACjC,UAAM,UAAU,OAAO,KAAK,WAAS,MAAM,OAAO;AAClD,UAAM,eAAe,WAAW,OAAO,CAAC;AAGxC,QAAI,cAAc;AAChB,mBAAa,MAAM;AAAA,IACrB;AAAA,EACF;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEA,MAAc,oBAAoB;AA3NpC;AA4NI,UAAM,SAAS,KAAK,aAAa;AAEjC,UAAM,QAAQ;AAAA;AAAA,MAEZ,OAAO,IAAI,OAAM,UAAS;AACxB,cAAM,MAAM;AACZ,cAAM,UAAU,MAAM,UAAU,KAAK;AACrC,cAAM,OAAO,KAAK;AAAA,MACpB,CAAC;AAAA,IACH;AAEA,SAAK,iBAAiB,OAAO,KAAK,WAAS,MAAM,QAAQ,YAAY,MAAM,kBAAkB;AAE7F,QAAI,OAAO,SAAS,KAAK,CAAC,OAAO,KAAK,WAAS,MAAM,OAAO,GAAG;AAC7D,UAAI,KAAK,gBAAgB;AACvB,cAAM,eAAc,YAAO,CAAC,EAAE,eAAV,mBAAsB,cAAc;AAExD,YAAI,aAAa;AACf,sBAAY,WAAW;AAAA,QACzB;AAAA,MACF,OAAO;AACL,eAAO,CAAC,EAAE,WAAW;AAAA,MACvB;AAAA,IACF;AAEA,QAAI,KAAK,gBAAgB;AACvB,YAAM,eAAc,UAAK,eAAL,mBAAiB,cAAc;AAEnD,UAAI,aAAa;AACf,oBAAY,cAAc;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,aAAa;AACnB,QAAI,eAAe,IAAI,WAAW,KAAK,eAAe,IAAI,kBAAkB,GAAG;AAC7E,WAAK,kBAAkB;AACvB;AAAA,IACF;AAEA,QAAI,eAAe,IAAI,WAAW,GAAG;AACnC,WAAK,kBAAkB;AAAA,IACzB,OAAO;AACL,qBAAe,YAAY,WAAW,EAAE,KAAK,MAAM,KAAK,WAAW,CAAC;AAAA,IACtE;AAEA,QAAI,eAAe,IAAI,kBAAkB,GAAG;AAC1C,WAAK,kBAAkB;AAAA,IACzB,OAAO;AAEL,qBAAe,YAAY,kBAAkB,EAAE,KAAK,MAAM,KAAK,WAAW,CAAC;AAAA,IAC7E;AAAA,EACF;AAAA,EAEQ,qBAAqB;AAC3B,UAAM,SAAS,KAAK,aAAa;AACjC,WAAO,QAAQ,WAAU,MAAM,UAAU,MAAM,UAAU,KAAK,KAAM;AACpE,SAAK,sBAAsB,YAAY,KAAK,SAAS,KAAK;AAAA,EAC5D;AAAA,EAGA,mBAAmB;AACjB,SAAK,WAAW;AAAA,EAClB;AAAA,EAGA,oBAAoB;AAClB,QAAI,KAAK,YAAY;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAGA,gBAAgB;AACd,UAAM,qBAAqB,KAAK,YAAY,CAAC,KAAK;AAClD,UAAM,2BAA2B,KAAK,0BAA0B;AAEhE,QAAI,sBAAsB,0BAA0B;AAClD,WAAK,sBAAsB,iBAAiB;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAA0B;AACxB,UAAM,UAAU,KAAK,SAAS;AAE9B,SAAK,eAAe,KAAK,yBAAyB,UAAU,KAAK,KAAK,gBAAgB;AACtF,SAAK,sBAAsB,YAAY,OAAO;AAC9C,SAAK,gBAAgB,SAAS;AAC9B,iBAAa,KAAK,iBAAiB;AAEnC,QAAI,CAAC,SAAS;AAEZ,WAAK,gBAAgB,SAAS;AAC9B,WAAK,gBAAgB,eAAe;AACpC,WAAK,oBAAoB,WAAW,MAAO,KAAK,gBAAgB,SAAS,MAAO,GAAK;AAAA,IACvF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,kBAAkB,UAAU,IAAI;AAC9B,SAAK,wBAAwB;AAC7B,SAAK,eAAe;AACpB,SAAK,gBAAgB,kBAAkB,OAAO;AAC9C,SAAK,sBAAsB,eAAe;AAAA,EAC5C;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,cAAc;AAAA,0BACE,KAAK,UAAU,WAAW,KAAK,gBAAgB,aAAa,KAAK,aAAa;AAAA;AAGpG,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,6BAA6B;AAAA,MAC7B,2BAA2B;AAAA,MAC3B,+BAA+B;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUc,WAAW,UAAU,MAAM;AAAA,mBAChC,KAAK,gBAAgB;AAAA;AAAA,+BAET,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKmB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKjD,KAAK,QAAQ;AAAA;AAAA;AAAA,2BAGd,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjC,KAAK,iBACH;AAAA;AAAA,oBAEM,WAAW;AAAA;AAAA,kBAGjB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOD,cAAc,UAAU,MAAM;AAAA;AAAA,mCAEnB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9C;AACF;AAjWqB,cACZ,SAAyB,CAAC,0BAAiB,6BAAmB,4BAAQ,oCAAyB,iCAAY;AAD/F,cAEZ,eAAe,EAAE,oBAAoB,eAAe;AAOhC;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GATN,cASQ;AACc;AAAA,EAAxC,MAAM,gCAAgC;AAAA,GAVpB,cAUsB;AAExB;AAAA,EAAhB,MAAM;AAAA,GAZY,cAYF;AACA;AAAA,EAAhB,MAAM;AAAA,GAbY,cAaF;AACR;AAAA,EAAR,MAAM;AAAA,GAdY,cAcV;AAMG;AAAA,EAAX,SAAS;AAAA,GApBS,cAoBP;AAG0B;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GAvBjB,cAuBmB;AAG1B;AAAA,EAAX,SAAS;AAAA,GA1BS,cA0BP;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA7BR,cA6BU;AAGA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAhCR,cAgCU;AAOA;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvCR,cAuCU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1CvB,cA0CyB;AAwL5C;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAjO1B,cAkOnB;AAKA;AAAA,EADC,MAAM,OAAO;AAAA,GAtOK,cAuOnB;",
|
|
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/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
|
-
}
|