@synergy-design-system/components 2.30.1 → 2.30.3
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.5PKVCNHM.js → chunk.2BF2ZBSM.js} +8 -8
- package/dist/chunks/chunk.2BF2ZBSM.js.map +7 -0
- package/dist/chunks/{chunk.SZ73NMRJ.js → chunk.2NS2E3LJ.js} +2 -2
- package/dist/chunks/{chunk.DG6GXAVF.js → chunk.2W4MHJAM.js} +6 -6
- package/dist/chunks/chunk.2W4MHJAM.js.map +7 -0
- package/dist/chunks/{chunk.3TOKEYJ6.js → chunk.3EPDSEI7.js} +2 -2
- package/dist/chunks/{chunk.2X3APD3V.js → chunk.3OUFLG7V.js} +6 -6
- package/dist/chunks/chunk.3OUFLG7V.js.map +7 -0
- package/dist/chunks/{chunk.WASTXK4A.js → chunk.3QPOD3RO.js} +6 -6
- package/dist/chunks/chunk.3QPOD3RO.js.map +7 -0
- package/dist/chunks/{chunk.QOP6ET4B.js → chunk.3TECDOBS.js} +2 -2
- package/dist/chunks/{chunk.JCJ64TPZ.js → chunk.43UZR7JA.js} +2 -2
- package/dist/chunks/{chunk.UTPP6KE2.js → chunk.45RYQJWS.js} +2 -2
- package/dist/chunks/{chunk.AQHRP3JF.js → chunk.4FYUNOAF.js} +2 -2
- package/dist/chunks/{chunk.2GXRGBN3.js → chunk.4KUAEC3S.js} +2 -2
- package/dist/chunks/{chunk.GAN4SEH5.js → chunk.4XC7NAJH.js} +2 -2
- package/dist/chunks/{chunk.QJPMVHQX.js → chunk.5U2JN5LA.js} +2 -2
- package/dist/chunks/chunk.5U2JN5LA.js.map +7 -0
- package/dist/chunks/{chunk.BMR7V4GF.js → chunk.67BZVLOD.js} +2 -2
- package/dist/chunks/{chunk.UTJJJQMA.js → chunk.6GBQX53P.js} +2 -2
- package/dist/chunks/{chunk.NHGNW7PA.js → chunk.6HKWYUE5.js} +6 -6
- package/dist/chunks/chunk.6HKWYUE5.js.map +7 -0
- package/dist/chunks/{chunk.USSHF6CO.js → chunk.7PPS4IJJ.js} +2 -2
- package/dist/chunks/{chunk.KLZ5NK2C.js → chunk.7YYNY2ZX.js} +2 -2
- package/dist/chunks/{chunk.FHND52A3.js → chunk.A77V4OPP.js} +3 -3
- package/dist/chunks/chunk.A77V4OPP.js.map +7 -0
- package/dist/chunks/{chunk.HWNTLXRL.js → chunk.ARJFVRBM.js} +3 -3
- package/dist/chunks/chunk.ARJFVRBM.js.map +7 -0
- package/dist/chunks/{chunk.IZBTM55D.js → chunk.BG6L74VC.js} +2 -2
- package/dist/chunks/{chunk.2RAC47FN.js → chunk.BXAD2FTL.js} +2 -2
- package/dist/chunks/chunk.BXAD2FTL.js.map +7 -0
- package/dist/chunks/{chunk.2RXN2SCD.js → chunk.C4JBMUTM.js} +6 -6
- package/dist/chunks/chunk.C4JBMUTM.js.map +7 -0
- package/dist/chunks/{chunk.JP4QSX7M.js → chunk.CFUIAMHI.js} +2 -2
- package/dist/chunks/{chunk.RAU2GK6I.js → chunk.CXRCFXZR.js} +8 -8
- package/dist/chunks/chunk.CXRCFXZR.js.map +7 -0
- package/dist/chunks/{chunk.U3CL2TPE.js → chunk.CZG2SMYG.js} +2 -2
- package/dist/chunks/{chunk.762G3PEJ.js → chunk.D3UJRRO6.js} +6 -6
- package/dist/chunks/chunk.D3UJRRO6.js.map +7 -0
- package/dist/chunks/{chunk.5ZRFAVKG.js → chunk.DCDK3EXG.js} +2 -2
- package/dist/chunks/{chunk.SFIQJMJV.js → chunk.DMB7Z2ZQ.js} +2 -2
- package/dist/chunks/{chunk.YSRREAXX.js → chunk.E5IDSSSD.js} +3 -3
- package/dist/chunks/{chunk.YSRREAXX.js.map → chunk.E5IDSSSD.js.map} +1 -1
- package/dist/chunks/{chunk.FITEZWTQ.js → chunk.FA4T7QQM.js} +2 -2
- package/dist/chunks/{chunk.FITEZWTQ.js.map → chunk.FA4T7QQM.js.map} +1 -1
- package/dist/chunks/{chunk.X3CFZAHW.js → chunk.FQYBA7T7.js} +2 -2
- package/dist/chunks/{chunk.X3CFZAHW.js.map → chunk.FQYBA7T7.js.map} +1 -1
- package/dist/chunks/{chunk.532L4VKN.js → chunk.FT3M2BTH.js} +2 -2
- package/dist/chunks/{chunk.SWCGPDHW.js → chunk.FULJSSFR.js} +2 -2
- package/dist/chunks/{chunk.TX2PDRBM.js → chunk.G2JP7HEH.js} +7 -7
- package/dist/chunks/chunk.G2JP7HEH.js.map +7 -0
- package/dist/chunks/{chunk.WA7EKCMV.js → chunk.G2TWKVVP.js} +2 -2
- package/dist/chunks/{chunk.BOBXDVSO.js → chunk.GA2HU6II.js} +6 -6
- package/dist/chunks/chunk.GA2HU6II.js.map +7 -0
- package/dist/chunks/{chunk.AJW2D63L.js → chunk.GE3DTZIM.js} +2 -2
- package/dist/chunks/{chunk.NUYZREPZ.js → chunk.GEV5TYRZ.js} +4 -4
- package/dist/chunks/{chunk.R3THZVHP.js → chunk.IC3XQ2EB.js} +2 -2
- package/dist/chunks/chunk.IC3XQ2EB.js.map +7 -0
- package/dist/chunks/{chunk.PRJ3FJGJ.js → chunk.ICGTNBIJ.js} +3 -3
- package/dist/chunks/{chunk.QX2JOWGH.js → chunk.IGLOIZ2W.js} +5 -5
- package/dist/chunks/chunk.IGLOIZ2W.js.map +7 -0
- package/dist/chunks/{chunk.ZDYMO5XT.js → chunk.IHQEDOAX.js} +2 -2
- package/dist/chunks/{chunk.FGAEUKVN.js → chunk.IUY4D7U3.js} +2 -2
- package/dist/chunks/{chunk.B3D627OD.js → chunk.JIELXBUU.js} +2 -2
- package/dist/chunks/chunk.JIELXBUU.js.map +7 -0
- package/dist/chunks/{chunk.E6OUQFF4.js → chunk.JU7GGWDE.js} +2 -2
- package/dist/chunks/{chunk.K36FG4W2.js → chunk.K4EBTKOS.js} +9 -9
- package/dist/chunks/chunk.K4EBTKOS.js.map +7 -0
- package/dist/chunks/{chunk.GYSYAXFI.js → chunk.KSWTSMEX.js} +8 -8
- package/dist/chunks/chunk.KSWTSMEX.js.map +7 -0
- package/dist/chunks/{chunk.A4FID4OH.js → chunk.KUQ6N3FH.js} +2 -2
- package/dist/chunks/{chunk.BRFSQ5UO.js → chunk.KWMZ63WC.js} +2 -2
- package/dist/chunks/chunk.KWMZ63WC.js.map +7 -0
- package/dist/chunks/{chunk.T4IRZQY2.js → chunk.KXDWM25J.js} +2 -2
- package/dist/chunks/{chunk.T4IRZQY2.js.map → chunk.KXDWM25J.js.map} +1 -1
- package/dist/chunks/{chunk.GOYGD46T.js → chunk.MVBAJTOF.js} +7 -7
- package/dist/chunks/{chunk.6ZCQFVOC.js → chunk.NC57MFGC.js} +2 -2
- package/dist/chunks/{chunk.3ZXMZDAX.js → chunk.NECBJEDG.js} +2 -2
- package/dist/chunks/{chunk.E4QLMZHL.js → chunk.NFEMXBDN.js} +2 -2
- package/dist/chunks/{chunk.YU2PZ5EK.js → chunk.NGIPAGC4.js} +2 -2
- package/dist/chunks/{chunk.UKUUCUD7.js → chunk.NLYJFOZZ.js} +6 -6
- package/dist/chunks/{chunk.RYQHOPIY.js → chunk.NTSN7KDQ.js} +2 -2
- package/dist/chunks/chunk.NTSN7KDQ.js.map +7 -0
- package/dist/chunks/{chunk.AMIQC3O7.js → chunk.OLRA37R5.js} +1 -1
- package/dist/chunks/{chunk.AMIQC3O7.js.map → chunk.OLRA37R5.js.map} +1 -1
- package/dist/chunks/{chunk.6AKLDG33.js → chunk.OPSPWNFD.js} +2 -2
- package/dist/chunks/{chunk.6AKLDG33.js.map → chunk.OPSPWNFD.js.map} +1 -1
- package/dist/chunks/{chunk.PDDQXWQR.js → chunk.OSJ3WQFD.js} +2 -2
- package/dist/chunks/{chunk.Y5RGUISY.js → chunk.PCHN7UNX.js} +2 -2
- package/dist/chunks/{chunk.Y5RGUISY.js.map → chunk.PCHN7UNX.js.map} +1 -1
- package/dist/chunks/{chunk.CILTVCBQ.js → chunk.PJF3RP7Q.js} +7 -7
- package/dist/chunks/chunk.PJF3RP7Q.js.map +7 -0
- package/dist/chunks/{chunk.IQGYOOWV.js → chunk.PLRHUWDP.js} +2 -2
- package/dist/chunks/{chunk.EFJD5CZ6.js → chunk.PQGDR57N.js} +2 -2
- package/dist/chunks/{chunk.D36G42T7.js → chunk.PZSENCZE.js} +7 -7
- package/dist/chunks/chunk.PZSENCZE.js.map +7 -0
- package/dist/chunks/{chunk.NDIBJ6JI.js → chunk.QCGPJAQF.js} +6 -6
- package/dist/chunks/chunk.QCGPJAQF.js.map +7 -0
- package/dist/chunks/{chunk.ZUQIXELH.js → chunk.QFS6KGDB.js} +2 -2
- package/dist/chunks/{chunk.QHPOPKTJ.js → chunk.R2CZGOPZ.js} +6 -6
- package/dist/chunks/chunk.R2CZGOPZ.js.map +7 -0
- package/dist/chunks/{chunk.HLQWQZQU.js → chunk.R3VV2JKB.js} +5 -5
- package/dist/chunks/chunk.R3VV2JKB.js.map +7 -0
- package/dist/chunks/{chunk.FJSVF4A2.js → chunk.RCM2ZMZA.js} +2 -2
- package/dist/chunks/{chunk.D6UYGOT5.js → chunk.RM54PPPR.js} +2 -2
- package/dist/chunks/{chunk.3A4IZ7IM.js → chunk.RMDAJPSI.js} +9 -9
- package/dist/chunks/chunk.RMDAJPSI.js.map +7 -0
- package/dist/chunks/{chunk.UOY56ORY.js → chunk.RVEOI5HV.js} +2 -2
- package/dist/chunks/{chunk.UKYLRMT2.js → chunk.RXJYIHMS.js} +2 -2
- package/dist/chunks/{chunk.JQADLKNT.js → chunk.S3JOQPQH.js} +8 -8
- package/dist/chunks/chunk.S3JOQPQH.js.map +7 -0
- package/dist/chunks/{chunk.6OVQULWC.js → chunk.SFKDMJXY.js} +8 -8
- package/dist/chunks/{chunk.6OVQULWC.js.map → chunk.SFKDMJXY.js.map} +1 -1
- package/dist/chunks/{chunk.MDKD6I5N.js → chunk.SV2YRXTN.js} +9 -9
- package/dist/chunks/chunk.SV2YRXTN.js.map +7 -0
- package/dist/chunks/{chunk.3JKMMYX3.js → chunk.THRS75O2.js} +2 -2
- package/dist/chunks/{chunk.5WZOBIEX.js → chunk.TYEVZCIC.js} +9 -9
- package/dist/chunks/{chunk.KBBZYAPL.js → chunk.UMJHRTE5.js} +9 -9
- package/dist/chunks/chunk.UMJHRTE5.js.map +7 -0
- package/dist/chunks/{chunk.EEMCXA5G.js → chunk.VHXR6VJU.js} +2 -2
- package/dist/chunks/{chunk.GTFKE4JG.js → chunk.VP73GNNH.js} +2 -2
- package/dist/chunks/{chunk.AP55JRQ3.js → chunk.VXYIZUDW.js} +2 -2
- package/dist/chunks/{chunk.QVRCVDGA.js → chunk.WJR72FH5.js} +2 -2
- package/dist/chunks/{chunk.XA4EOA25.js → chunk.WPIWR6GG.js} +8 -8
- package/dist/chunks/{chunk.HI3CSD4O.js → chunk.WTUKJGCV.js} +2 -2
- package/dist/chunks/{chunk.63LZB375.js → chunk.WZSMJ2WD.js} +2 -2
- package/dist/chunks/chunk.WZSMJ2WD.js.map +7 -0
- package/dist/chunks/{chunk.2HPEABF4.js → chunk.XHQTVQU6.js} +2 -2
- package/dist/chunks/{chunk.QQ26YV6J.js → chunk.XV6MIV3R.js} +7 -7
- package/dist/chunks/chunk.XV6MIV3R.js.map +7 -0
- package/dist/chunks/{chunk.IXSDGMHS.js → chunk.YJ5O6SUI.js} +2 -2
- package/dist/chunks/{chunk.574KKJH2.js → chunk.YTCOW742.js} +2 -2
- package/dist/chunks/{chunk.M6OBVNV5.js → chunk.ZFDM6C6S.js} +2 -2
- package/dist/chunks/{chunk.OJFEU2LY.js → chunk.ZHBRF2U3.js} +2 -2
- package/dist/chunks/{chunk.OJFEU2LY.js.map → chunk.ZHBRF2U3.js.map} +1 -1
- package/dist/chunks/{chunk.WIZJDLTC.js → chunk.ZHGCYOV2.js} +2 -2
- package/dist/chunks/chunk.ZHGCYOV2.js.map +7 -0
- package/dist/chunks/{chunk.46CKMKX5.js → chunk.ZJ43C76S.js} +3 -3
- package/dist/chunks/chunk.ZJ43C76S.js.map +7 -0
- package/dist/chunks/{chunk.NPAGHPJZ.js → chunk.ZOLZENHH.js} +2 -2
- package/dist/components/accordion/accordion.component.js +4 -4
- package/dist/components/accordion/accordion.js +5 -5
- package/dist/components/alert/alert.component.d.ts +1 -1
- package/dist/components/alert/alert.component.js +8 -8
- package/dist/components/alert/alert.js +9 -9
- package/dist/components/badge/badge.component.d.ts +1 -1
- package/dist/components/badge/badge.component.js +4 -4
- package/dist/components/badge/badge.js +5 -5
- package/dist/components/breadcrumb/breadcrumb.component.d.ts +1 -1
- package/dist/components/breadcrumb/breadcrumb.component.js +7 -7
- package/dist/components/breadcrumb/breadcrumb.js +8 -8
- package/dist/components/breadcrumb-item/breadcrumb-item.component.d.ts +1 -1
- package/dist/components/breadcrumb-item/breadcrumb-item.component.js +2 -2
- package/dist/components/breadcrumb-item/breadcrumb-item.js +3 -3
- package/dist/components/button/button.component.d.ts +1 -1
- package/dist/components/button/button.component.js +7 -7
- package/dist/components/button/button.js +8 -8
- package/dist/components/button-group/button-group.component.d.ts +1 -1
- package/dist/components/button-group/button-group.component.js +2 -2
- package/dist/components/button-group/button-group.js +3 -3
- package/dist/components/card/card.component.d.ts +1 -1
- package/dist/components/card/card.component.js +2 -2
- package/dist/components/card/card.js +3 -3
- package/dist/components/checkbox/checkbox.component.d.ts +1 -1
- package/dist/components/checkbox/checkbox.component.js +5 -5
- package/dist/components/checkbox/checkbox.js +6 -6
- package/dist/components/combobox/combobox.component.js +8 -8
- package/dist/components/combobox/combobox.js +9 -9
- package/dist/components/details/details.component.d.ts +1 -1
- package/dist/components/details/details.component.js +5 -5
- package/dist/components/details/details.js +6 -6
- package/dist/components/dialog/dialog.component.d.ts +1 -1
- package/dist/components/dialog/dialog.component.js +6 -6
- package/dist/components/dialog/dialog.js +7 -7
- package/dist/components/divider/divider.component.d.ts +1 -1
- package/dist/components/divider/divider.component.js +2 -2
- package/dist/components/divider/divider.js +3 -3
- package/dist/components/drawer/drawer.component.d.ts +1 -1
- package/dist/components/drawer/drawer.component.js +6 -6
- package/dist/components/drawer/drawer.js +7 -7
- package/dist/components/dropdown/dropdown.component.d.ts +1 -1
- package/dist/components/dropdown/dropdown.component.js +4 -4
- package/dist/components/dropdown/dropdown.js +5 -5
- package/dist/components/file/file.component.d.ts +1 -0
- package/dist/components/file/file.component.js +8 -8
- package/dist/components/file/file.js +9 -9
- package/dist/components/header/header.component.js +6 -6
- package/dist/components/header/header.js +7 -7
- package/dist/components/icon/icon.component.d.ts +1 -1
- package/dist/components/icon/icon.component.js +2 -2
- package/dist/components/icon/icon.js +3 -3
- package/dist/components/icon-button/icon-button.component.d.ts +1 -1
- package/dist/components/icon-button/icon-button.component.js +4 -4
- package/dist/components/icon-button/icon-button.js +5 -5
- package/dist/components/input/input.component.d.ts +1 -1
- package/dist/components/input/input.component.js +7 -7
- package/dist/components/input/input.js +8 -8
- package/dist/components/menu/menu.component.d.ts +1 -1
- package/dist/components/menu/menu.component.js +2 -2
- package/dist/components/menu/menu.js +3 -3
- package/dist/components/menu-item/menu-item.component.d.ts +1 -1
- package/dist/components/menu-item/menu-item.component.js +7 -7
- package/dist/components/menu-item/menu-item.js +8 -8
- package/dist/components/menu-label/menu-label.component.d.ts +1 -1
- package/dist/components/menu-label/menu-label.component.js +3 -3
- package/dist/components/menu-label/menu-label.js +4 -4
- package/dist/components/nav-item/nav-item.component.d.ts +1 -0
- package/dist/components/nav-item/nav-item.component.js +3 -3
- package/dist/components/nav-item/nav-item.js +4 -4
- package/dist/components/optgroup/optgroup.component.js +3 -3
- package/dist/components/optgroup/optgroup.js +4 -4
- package/dist/components/option/option.component.d.ts +1 -1
- package/dist/components/option/option.component.js +5 -5
- package/dist/components/option/option.js +6 -6
- package/dist/components/popup/popup.component.d.ts +1 -1
- package/dist/components/popup/popup.component.js +2 -2
- package/dist/components/popup/popup.js +3 -3
- package/dist/components/prio-nav/prio-nav.component.d.ts +1 -0
- package/dist/components/prio-nav/prio-nav.component.js +10 -10
- package/dist/components/prio-nav/prio-nav.js +11 -11
- package/dist/components/progress-bar/progress-bar.component.d.ts +1 -1
- package/dist/components/progress-bar/progress-bar.component.js +2 -2
- package/dist/components/progress-bar/progress-bar.js +3 -3
- package/dist/components/progress-ring/progress-ring.component.d.ts +1 -1
- package/dist/components/progress-ring/progress-ring.component.js +2 -2
- package/dist/components/progress-ring/progress-ring.js +3 -3
- package/dist/components/radio/radio.component.d.ts +1 -1
- package/dist/components/radio/radio.component.js +4 -4
- package/dist/components/radio/radio.js +5 -5
- package/dist/components/radio-button/radio-button.component.d.ts +1 -1
- package/dist/components/radio-button/radio-button.component.js +3 -3
- package/dist/components/radio-button/radio-button.js +4 -4
- package/dist/components/radio-group/radio-group.component.d.ts +1 -1
- package/dist/components/radio-group/radio-group.component.js +5 -5
- package/dist/components/radio-group/radio-group.js +6 -6
- package/dist/components/range/range.component.js +6 -6
- package/dist/components/range/range.js +7 -7
- package/dist/components/range-tick/range-tick.component.d.ts +1 -1
- package/dist/components/range-tick/range-tick.component.js +2 -2
- package/dist/components/range-tick/range-tick.js +3 -3
- package/dist/components/resize-observer/resize-observer.component.d.ts +1 -1
- package/dist/components/resize-observer/resize-observer.component.js +2 -2
- package/dist/components/select/select.component.d.ts +1 -1
- package/dist/components/select/select.component.js +9 -9
- package/dist/components/select/select.js +10 -10
- package/dist/components/side-nav/side-nav.component.js +8 -8
- package/dist/components/side-nav/side-nav.js +9 -9
- package/dist/components/spinner/spinner.component.d.ts +1 -1
- package/dist/components/spinner/spinner.component.js +2 -2
- package/dist/components/spinner/spinner.js +3 -3
- package/dist/components/switch/switch.component.d.ts +1 -1
- package/dist/components/switch/switch.component.js +4 -4
- package/dist/components/switch/switch.js +5 -5
- package/dist/components/tab/tab.component.d.ts +1 -1
- package/dist/components/tab/tab.component.js +6 -6
- package/dist/components/tab/tab.js +7 -7
- package/dist/components/tab-group/tab-group.component.d.ts +1 -1
- package/dist/components/tab-group/tab-group.component.js +7 -7
- package/dist/components/tab-group/tab-group.js +8 -8
- package/dist/components/tab-panel/tab-panel.component.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.component.js +2 -2
- package/dist/components/tab-panel/tab-panel.js +3 -3
- package/dist/components/tag/tag.component.d.ts +1 -1
- package/dist/components/tag/tag.component.js +6 -6
- package/dist/components/tag/tag.js +7 -7
- package/dist/components/textarea/textarea.component.d.ts +1 -1
- package/dist/components/textarea/textarea.component.js +4 -4
- package/dist/components/textarea/textarea.js +5 -5
- package/dist/components/tooltip/tooltip.component.d.ts +1 -1
- package/dist/components/tooltip/tooltip.component.js +4 -4
- package/dist/components/tooltip/tooltip.js +5 -5
- package/dist/components/validate/utility.js +2 -2
- package/dist/components/validate/validate.component.d.ts +1 -1
- package/dist/components/validate/validate.component.js +10 -10
- package/dist/components/validate/validate.js +11 -11
- package/dist/custom-elements.json +93 -85
- package/dist/styles/index.css +1 -1
- package/dist/synergy.js +109 -109
- package/dist/utilities/form.js +2 -2
- package/dist/vscode.html-custom-data.json +48 -48
- package/package.json +1 -1
- package/dist/chunks/chunk.2RAC47FN.js.map +0 -7
- package/dist/chunks/chunk.2RXN2SCD.js.map +0 -7
- package/dist/chunks/chunk.2X3APD3V.js.map +0 -7
- package/dist/chunks/chunk.3A4IZ7IM.js.map +0 -7
- package/dist/chunks/chunk.46CKMKX5.js.map +0 -7
- package/dist/chunks/chunk.5PKVCNHM.js.map +0 -7
- package/dist/chunks/chunk.63LZB375.js.map +0 -7
- package/dist/chunks/chunk.762G3PEJ.js.map +0 -7
- package/dist/chunks/chunk.B3D627OD.js.map +0 -7
- package/dist/chunks/chunk.BOBXDVSO.js.map +0 -7
- package/dist/chunks/chunk.BRFSQ5UO.js.map +0 -7
- package/dist/chunks/chunk.CILTVCBQ.js.map +0 -7
- package/dist/chunks/chunk.D36G42T7.js.map +0 -7
- package/dist/chunks/chunk.DG6GXAVF.js.map +0 -7
- package/dist/chunks/chunk.FHND52A3.js.map +0 -7
- package/dist/chunks/chunk.GYSYAXFI.js.map +0 -7
- package/dist/chunks/chunk.HLQWQZQU.js.map +0 -7
- package/dist/chunks/chunk.HWNTLXRL.js.map +0 -7
- package/dist/chunks/chunk.JQADLKNT.js.map +0 -7
- package/dist/chunks/chunk.K36FG4W2.js.map +0 -7
- package/dist/chunks/chunk.KBBZYAPL.js.map +0 -7
- package/dist/chunks/chunk.MDKD6I5N.js.map +0 -7
- package/dist/chunks/chunk.NDIBJ6JI.js.map +0 -7
- package/dist/chunks/chunk.NHGNW7PA.js.map +0 -7
- package/dist/chunks/chunk.QHPOPKTJ.js.map +0 -7
- package/dist/chunks/chunk.QJPMVHQX.js.map +0 -7
- package/dist/chunks/chunk.QQ26YV6J.js.map +0 -7
- package/dist/chunks/chunk.QX2JOWGH.js.map +0 -7
- package/dist/chunks/chunk.R3THZVHP.js.map +0 -7
- package/dist/chunks/chunk.RAU2GK6I.js.map +0 -7
- package/dist/chunks/chunk.RYQHOPIY.js.map +0 -7
- package/dist/chunks/chunk.TX2PDRBM.js.map +0 -7
- package/dist/chunks/chunk.WASTXK4A.js.map +0 -7
- package/dist/chunks/chunk.WIZJDLTC.js.map +0 -7
- /package/dist/chunks/{chunk.SZ73NMRJ.js.map → chunk.2NS2E3LJ.js.map} +0 -0
- /package/dist/chunks/{chunk.3TOKEYJ6.js.map → chunk.3EPDSEI7.js.map} +0 -0
- /package/dist/chunks/{chunk.QOP6ET4B.js.map → chunk.3TECDOBS.js.map} +0 -0
- /package/dist/chunks/{chunk.JCJ64TPZ.js.map → chunk.43UZR7JA.js.map} +0 -0
- /package/dist/chunks/{chunk.UTPP6KE2.js.map → chunk.45RYQJWS.js.map} +0 -0
- /package/dist/chunks/{chunk.AQHRP3JF.js.map → chunk.4FYUNOAF.js.map} +0 -0
- /package/dist/chunks/{chunk.2GXRGBN3.js.map → chunk.4KUAEC3S.js.map} +0 -0
- /package/dist/chunks/{chunk.GAN4SEH5.js.map → chunk.4XC7NAJH.js.map} +0 -0
- /package/dist/chunks/{chunk.BMR7V4GF.js.map → chunk.67BZVLOD.js.map} +0 -0
- /package/dist/chunks/{chunk.UTJJJQMA.js.map → chunk.6GBQX53P.js.map} +0 -0
- /package/dist/chunks/{chunk.USSHF6CO.js.map → chunk.7PPS4IJJ.js.map} +0 -0
- /package/dist/chunks/{chunk.KLZ5NK2C.js.map → chunk.7YYNY2ZX.js.map} +0 -0
- /package/dist/chunks/{chunk.IZBTM55D.js.map → chunk.BG6L74VC.js.map} +0 -0
- /package/dist/chunks/{chunk.JP4QSX7M.js.map → chunk.CFUIAMHI.js.map} +0 -0
- /package/dist/chunks/{chunk.U3CL2TPE.js.map → chunk.CZG2SMYG.js.map} +0 -0
- /package/dist/chunks/{chunk.5ZRFAVKG.js.map → chunk.DCDK3EXG.js.map} +0 -0
- /package/dist/chunks/{chunk.SFIQJMJV.js.map → chunk.DMB7Z2ZQ.js.map} +0 -0
- /package/dist/chunks/{chunk.532L4VKN.js.map → chunk.FT3M2BTH.js.map} +0 -0
- /package/dist/chunks/{chunk.SWCGPDHW.js.map → chunk.FULJSSFR.js.map} +0 -0
- /package/dist/chunks/{chunk.WA7EKCMV.js.map → chunk.G2TWKVVP.js.map} +0 -0
- /package/dist/chunks/{chunk.AJW2D63L.js.map → chunk.GE3DTZIM.js.map} +0 -0
- /package/dist/chunks/{chunk.NUYZREPZ.js.map → chunk.GEV5TYRZ.js.map} +0 -0
- /package/dist/chunks/{chunk.PRJ3FJGJ.js.map → chunk.ICGTNBIJ.js.map} +0 -0
- /package/dist/chunks/{chunk.ZDYMO5XT.js.map → chunk.IHQEDOAX.js.map} +0 -0
- /package/dist/chunks/{chunk.FGAEUKVN.js.map → chunk.IUY4D7U3.js.map} +0 -0
- /package/dist/chunks/{chunk.E6OUQFF4.js.map → chunk.JU7GGWDE.js.map} +0 -0
- /package/dist/chunks/{chunk.A4FID4OH.js.map → chunk.KUQ6N3FH.js.map} +0 -0
- /package/dist/chunks/{chunk.GOYGD46T.js.map → chunk.MVBAJTOF.js.map} +0 -0
- /package/dist/chunks/{chunk.6ZCQFVOC.js.map → chunk.NC57MFGC.js.map} +0 -0
- /package/dist/chunks/{chunk.3ZXMZDAX.js.map → chunk.NECBJEDG.js.map} +0 -0
- /package/dist/chunks/{chunk.E4QLMZHL.js.map → chunk.NFEMXBDN.js.map} +0 -0
- /package/dist/chunks/{chunk.YU2PZ5EK.js.map → chunk.NGIPAGC4.js.map} +0 -0
- /package/dist/chunks/{chunk.UKUUCUD7.js.map → chunk.NLYJFOZZ.js.map} +0 -0
- /package/dist/chunks/{chunk.PDDQXWQR.js.map → chunk.OSJ3WQFD.js.map} +0 -0
- /package/dist/chunks/{chunk.IQGYOOWV.js.map → chunk.PLRHUWDP.js.map} +0 -0
- /package/dist/chunks/{chunk.EFJD5CZ6.js.map → chunk.PQGDR57N.js.map} +0 -0
- /package/dist/chunks/{chunk.ZUQIXELH.js.map → chunk.QFS6KGDB.js.map} +0 -0
- /package/dist/chunks/{chunk.FJSVF4A2.js.map → chunk.RCM2ZMZA.js.map} +0 -0
- /package/dist/chunks/{chunk.D6UYGOT5.js.map → chunk.RM54PPPR.js.map} +0 -0
- /package/dist/chunks/{chunk.UOY56ORY.js.map → chunk.RVEOI5HV.js.map} +0 -0
- /package/dist/chunks/{chunk.UKYLRMT2.js.map → chunk.RXJYIHMS.js.map} +0 -0
- /package/dist/chunks/{chunk.3JKMMYX3.js.map → chunk.THRS75O2.js.map} +0 -0
- /package/dist/chunks/{chunk.5WZOBIEX.js.map → chunk.TYEVZCIC.js.map} +0 -0
- /package/dist/chunks/{chunk.EEMCXA5G.js.map → chunk.VHXR6VJU.js.map} +0 -0
- /package/dist/chunks/{chunk.GTFKE4JG.js.map → chunk.VP73GNNH.js.map} +0 -0
- /package/dist/chunks/{chunk.AP55JRQ3.js.map → chunk.VXYIZUDW.js.map} +0 -0
- /package/dist/chunks/{chunk.QVRCVDGA.js.map → chunk.WJR72FH5.js.map} +0 -0
- /package/dist/chunks/{chunk.XA4EOA25.js.map → chunk.WPIWR6GG.js.map} +0 -0
- /package/dist/chunks/{chunk.HI3CSD4O.js.map → chunk.WTUKJGCV.js.map} +0 -0
- /package/dist/chunks/{chunk.2HPEABF4.js.map → chunk.XHQTVQU6.js.map} +0 -0
- /package/dist/chunks/{chunk.IXSDGMHS.js.map → chunk.YJ5O6SUI.js.map} +0 -0
- /package/dist/chunks/{chunk.574KKJH2.js.map → chunk.YTCOW742.js.map} +0 -0
- /package/dist/chunks/{chunk.M6OBVNV5.js.map → chunk.ZFDM6C6S.js.map} +0 -0
- /package/dist/chunks/{chunk.NPAGHPJZ.js.map → chunk.ZOLZENHH.js.map} +0 -0
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/popup/popup.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 { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { offsetParent } from 'composed-offset-position';\nimport { property, query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './popup.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nexport interface VirtualElement {\n getBoundingClientRect: () => DOMRect;\n contextElement?: Element;\n}\n\nfunction isVirtualElement(e: unknown): e is VirtualElement {\n return (\n e !== null &&\n typeof e === 'object' &&\n 'getBoundingClientRect' in e &&\n ('contextElement' in e ? e.contextElement instanceof Element : true)\n );\n}\n\n/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy.style/components/popup\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n * operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n * `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n * assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n * maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n * attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n * available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n * popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n * available when using `auto-size`.\n */\nexport default class SynPopup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n private anchorEl: Element | VirtualElement | null;\n private cleanup: ReturnType<typeof autoUpdate> | undefined;\n private readonly localize = new LocalizeController(this);\n\n /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n @query('.popup') popup: HTMLElement;\n @query('.popup__arrow') private arrowEl: HTMLElement;\n\n /**\n * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\n * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n * `anchor` slot instead.\n */\n @property() anchor: Element | string | VirtualElement;\n\n /**\n * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n * down and the popup will be hidden.\n */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /**\n * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n * panel 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' = 'top';\n\n /**\n * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n * clipped, using a `fixed` position strategy can often workaround it.\n */\n @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\n\n /** The distance in pixels from which to offset the panel away from its anchor. */\n @property({ type: Number }) distance = 0;\n\n /** The distance in pixels from which to offset the panel along its anchor. */\n @property({ type: Number }) skidding = 0;\n\n /**\n * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n * `::part(arrow)` in your stylesheet.\n */\n @property({ type: Boolean }) arrow = false;\n\n /**\n * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n * align the arrow to the start, end, or center of the popover instead.\n */\n @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n /**\n * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n * this will prevent it from overflowing the corners.\n */\n @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n /**\n * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n */\n @property({ type: Boolean }) flip = false;\n\n /**\n * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n * fallback strategy will be used instead.\n * */\n @property({\n attribute: 'flip-fallback-placements',\n converter: {\n fromAttribute: (value: string) => {\n return value\n .split(' ')\n .map(p => p.trim())\n .filter(p => p !== '');\n },\n toAttribute: (value: []) => {\n return value.join(' ');\n }\n }\n })\n flipFallbackPlacements = '';\n\n /**\n * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n * the popup should be positioned using the best available fit based on available space or as it was initially\n * preferred.\n */\n @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n /**\n * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) flipBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n /** Moves the popup along the axis to keep it in view when clipped. */\n @property({ type: Boolean }) shift = false;\n\n /**\n * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) shiftBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n /** Syncs the popup's width or height to that of the anchor element. */\n @property() sync: 'width' | 'height' | 'both';\n\n /**\n * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n * change the boundary by passing a reference to one or more elements to this property.\n */\n @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n /**\n * When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\n * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\n * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\n * active.\n */\n @property({ attribute: 'hover-bridge', type: Boolean }) hoverBridge = false;\n\n async connectedCallback() {\n super.connectedCallback();\n\n // Start the positioner after the first update\n await this.updateComplete;\n this.start();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.stop();\n }\n\n async updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n // Start or stop the positioner when active changes\n if (changedProps.has('active')) {\n if (this.active) {\n this.start();\n } else {\n this.stop();\n }\n }\n\n // Update the anchor when anchor changes\n if (changedProps.has('anchor')) {\n this.handleAnchorChange();\n }\n\n // All other properties will trigger a reposition when active\n if (this.active) {\n await this.updateComplete;\n this.reposition();\n }\n }\n\n private async handleAnchorChange() {\n await this.stop();\n\n if (this.anchor && typeof this.anchor === 'string') {\n // Locate the anchor by id\n const root = this.getRootNode() as Document | ShadowRoot;\n this.anchorEl = root.getElementById(this.anchor);\n } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n // Use the anchor's reference\n this.anchorEl = this.anchor;\n } else {\n // Look for a slotted anchor\n this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n }\n\n // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n // and positioning can't be calculated on them\n if (this.anchorEl instanceof HTMLSlotElement) {\n this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n }\n\n // If the anchor is valid, start it up\n if (this.anchorEl && this.active) {\n this.start();\n }\n }\n\n private start() {\n // We can't start the positioner without an anchor or when the popup is inactive\n if (!this.anchorEl || !this.active) {\n return;\n }\n\n this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n this.reposition();\n });\n }\n\n private async stop(): Promise<void> {\n return new Promise(resolve => {\n if (this.cleanup) {\n this.cleanup();\n this.cleanup = undefined;\n this.removeAttribute('data-current-placement');\n this.style.removeProperty('--auto-size-available-width');\n this.style.removeProperty('--auto-size-available-height');\n requestAnimationFrame(() => resolve());\n } else {\n resolve();\n }\n });\n }\n\n /** Forces the popup to recalculate and reposition itself. */\n reposition() {\n // Nothing to do if the popup is inactive or the anchor doesn't exist\n if (!this.active || !this.anchorEl) {\n return;\n }\n\n //\n // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n //\n const middleware = [\n // The offset middleware goes first\n offset({ mainAxis: this.distance, crossAxis: this.skidding })\n ];\n\n // First we sync width/height\n if (this.sync) {\n middleware.push(\n size({\n apply: ({ rects }) => {\n const syncWidth = this.sync === 'width' || this.sync === 'both';\n const syncHeight = this.sync === 'height' || this.sync === 'both';\n this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n }\n })\n );\n } else {\n // Cleanup styles if we're not matching width/height\n this.popup.style.width = '';\n this.popup.style.height = '';\n }\n\n // Then we flip\n if (this.flip) {\n middleware.push(\n flip({\n boundary: this.flipBoundary,\n // @ts-expect-error - We're converting a string attribute to an array here\n fallbackPlacements: this.flipFallbackPlacements,\n fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n padding: this.flipPadding\n })\n );\n }\n\n // Then we shift\n if (this.shift) {\n middleware.push(\n shift({\n boundary: this.shiftBoundary,\n padding: this.shiftPadding\n })\n );\n }\n\n // Now we adjust the size as needed\n if (this.autoSize) {\n middleware.push(\n size({\n boundary: this.autoSizeBoundary,\n padding: this.autoSizePadding,\n apply: ({ availableWidth, availableHeight }) => {\n if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n } else {\n this.style.removeProperty('--auto-size-available-height');\n }\n\n if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n } else {\n this.style.removeProperty('--auto-size-available-width');\n }\n }\n })\n );\n } else {\n // Cleanup styles if we're no longer using auto-size\n this.style.removeProperty('--auto-size-available-width');\n this.style.removeProperty('--auto-size-available-height');\n }\n\n // Finally, we add an arrow\n if (this.arrow) {\n middleware.push(\n arrow({\n element: this.arrowEl,\n padding: this.arrowPadding\n })\n );\n }\n\n //\n // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n //\n // More info: https://github.com/synergy-design-system/synergy/issues/1135\n //\n const getOffsetParent =\n this.strategy === 'absolute'\n ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n : platform.getOffsetParent;\n\n computePosition(this.anchorEl, this.popup, {\n placement: this.placement,\n middleware,\n strategy: this.strategy,\n platform: {\n ...platform,\n getOffsetParent\n }\n }).then(({ x, y, middlewareData, placement }) => {\n //\n // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n // that, we'll use the same approach that Floating UI uses.\n //\n // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n //\n const isRtl = this.localize.dir() === 'rtl';\n const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n this.setAttribute('data-current-placement', placement);\n\n Object.assign(this.popup.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n\n if (this.arrow) {\n const arrowX = middlewareData.arrow!.x;\n const arrowY = middlewareData.arrow!.y;\n let top = '';\n let right = '';\n let bottom = '';\n let left = '';\n\n if (this.arrowPlacement === 'start') {\n // Start\n const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n right = isRtl ? value : '';\n left = isRtl ? '' : value;\n } else if (this.arrowPlacement === 'end') {\n // End\n const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n right = isRtl ? '' : value;\n left = isRtl ? value : '';\n bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n } else if (this.arrowPlacement === 'center') {\n // Center\n left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n } else {\n // Anchor (default)\n left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n }\n\n Object.assign(this.arrowEl.style, {\n top,\n right,\n bottom,\n left,\n [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n });\n }\n });\n\n // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync\n requestAnimationFrame(() => this.updateHoverBridge());\n\n this.emit('syn-reposition');\n }\n\n private updateHoverBridge = () => {\n if (this.hoverBridge && this.anchorEl) {\n const anchorRect = this.anchorEl.getBoundingClientRect();\n const popupRect = this.popup.getBoundingClientRect();\n const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n let topLeftX = 0;\n let topLeftY = 0;\n let topRightX = 0;\n let topRightY = 0;\n let bottomLeftX = 0;\n let bottomLeftY = 0;\n let bottomRightX = 0;\n let bottomRightY = 0;\n\n if (isVertical) {\n if (anchorRect.top < popupRect.top) {\n // Anchor is above\n topLeftX = anchorRect.left;\n topLeftY = anchorRect.bottom;\n topRightX = anchorRect.right;\n topRightY = anchorRect.bottom;\n\n bottomLeftX = popupRect.left;\n bottomLeftY = popupRect.top;\n bottomRightX = popupRect.right;\n bottomRightY = popupRect.top;\n } else {\n // Anchor is below\n topLeftX = popupRect.left;\n topLeftY = popupRect.bottom;\n topRightX = popupRect.right;\n topRightY = popupRect.bottom;\n\n bottomLeftX = anchorRect.left;\n bottomLeftY = anchorRect.top;\n bottomRightX = anchorRect.right;\n bottomRightY = anchorRect.top;\n }\n } else {\n if (anchorRect.left < popupRect.left) {\n // Anchor is on the left\n topLeftX = anchorRect.right;\n topLeftY = anchorRect.top;\n topRightX = popupRect.left;\n topRightY = popupRect.top;\n\n bottomLeftX = anchorRect.right;\n bottomLeftY = anchorRect.bottom;\n bottomRightX = popupRect.left;\n bottomRightY = popupRect.bottom;\n } else {\n // Anchor is on the right\n topLeftX = popupRect.right;\n topLeftY = popupRect.top;\n topRightX = anchorRect.left;\n topRightY = anchorRect.top;\n\n bottomLeftX = popupRect.right;\n bottomLeftY = popupRect.bottom;\n bottomRightX = anchorRect.left;\n bottomRightY = anchorRect.bottom;\n }\n }\n\n this.style.setProperty('--hover-bridge-top-left-x', `${topLeftX}px`);\n this.style.setProperty('--hover-bridge-top-left-y', `${topLeftY}px`);\n this.style.setProperty('--hover-bridge-top-right-x', `${topRightX}px`);\n this.style.setProperty('--hover-bridge-top-right-y', `${topRightY}px`);\n this.style.setProperty('--hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n this.style.setProperty('--hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n this.style.setProperty('--hover-bridge-bottom-right-x', `${bottomRightX}px`);\n this.style.setProperty('--hover-bridge-bottom-right-y', `${bottomRightY}px`);\n }\n };\n\n render() {\n return html`\n <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n <span\n part=\"hover-bridge\"\n class=${classMap({\n 'popup-hover-bridge': true,\n 'popup-hover-bridge--visible': this.hoverBridge && this.active\n })}\n ></span>\n\n <div\n part=\"popup\"\n class=${classMap({\n popup: true,\n 'popup--active': this.active,\n 'popup--fixed': this.strategy === 'fixed',\n 'popup--has-arrow': this.arrow\n })}\n >\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\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/validate/validate.component.ts"],
|
|
4
|
-
"sourcesContent": ["import type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { watch } from '../../internal/watch.js';\nimport SynAlert from '../alert/alert.component.js';\nimport {\n getEventNameForElement,\n isBlurEvent,\n isInvalidEvent,\n normalizeEventAttribute,\n} from './utility.js';\nimport styles from './validate.styles.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n *\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */\n@enableDefaultSettings('SynValidate')\nexport default class SynValidate extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n static dependencies = {\n 'syn-alert': SynAlert,\n };\n\n controller = new AbortController();\n\n observer: MutationObserver;\n\n @queryAssignedElements() private slottedChildren: HTMLElement[];\n\n @state() validationMessage = '';\n\n @state() eagerFirstMount = true;\n\n @state() isInternalTriggeredInvalid = false;\n\n @state() isValid = true;\n\n /**\n * The variant that should be used to show validation alerts.\n *\n * The following variants are supported:\n * - **native** (default): Uses the native browser validation, usually a browser tooltip.\n * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`\n */\n @property({ reflect: true }) variant: 'native' | 'inline' = 'native';\n\n /** Do not show the error icon when using the inline variant validation */\n @property({ attribute: 'hide-icon', reflect: true, type: Boolean }) hideIcon = false;\n\n /**\n * Defines the events that trigger the validation.\n * `invalid` will always automatically be included.\n * You may also use the `live` keyword to validate on every input change.\n * `live` will make sure to listen to the `invalid`, `input` and `blur` events.\n *\n * Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.\n *\n * @example ```html\n * <!-- Validate on invalid and change events (invalid, change) -->\n * <syn-validate on=\"invalid change\"></syn-validate>\n *\n * <!-- Validate on live events (invalid, blur, input)-->\n * <syn-validate on=\"live\"></syn-validate>\n *\n * <!-- Validate on live and custom events (invalid, blur, input, focus, change) -->\n * <syn-validate on=\"live focus change\"></syn-validate>\n * ```\n */\n @property({ reflect: true }) on: string = '';\n\n /**\n * Custom validation message to be displayed when the input is invalid.\n * Will override the default browser validation message.\n * Set to an empty string to reset the validation message.\n */\n @property({ attribute: 'custom-validation-message', type: String }) customValidationMessage = '';\n\n /**\n * Set this to true to validate the input immediately when it is rendered.\n * Best used with a `variant` of `inline`.\n * When setting eager, the input will not be focused automatically.\n *\n * When using a `variant` of `native` the browser will focus\n * the last eager field as it is using a tooltip.\n * In this case it is better to just provide one eager field.\n */\n @property({ type: Boolean }) eager = false;\n\n // Automatically refresh all event listeners when the on property changes.\n @watch('on', { waitUntilFirstUpdate: true })\n handleListenerChange() {\n this.updateEvents();\n }\n\n @watch('eager', { waitUntilFirstUpdate: false })\n async handleEagerChange() {\n if (this.eager) {\n const input = this.getInput();\n await this.updateComplete;\n input?.reportValidity();\n this.eagerFirstMount = true;\n } else {\n this.eagerFirstMount = false;\n }\n }\n\n // Synchronize the validation message on the wrapped input with the custom message\n @watch('customValidationMessage', { waitUntilFirstUpdate: true })\n handleCustomValidationMessageChange() {\n const input = this.getInput();\n if (input) {\n this.setCustomValidationMessage(input);\n this.setValidationMessage(input);\n }\n }\n\n /**\n * Returns the validity state of the input component.\n * `true` for valid and `false` for invalid.\n */\n getValidity() {\n return this.isValid;\n }\n\n /**\n * Get the input element to validate. Defined as the first slotted element\n * @returns The input element or undefined if not found\n */\n private getInput() {\n const input = this.slottedChildren[0];\n return input ? input as HTMLInputElement : undefined;\n }\n\n /**\n * Get the event names to listen for.\n * If the input is a synergy element, will use syn- prefixes.\n * @returns The event names to listen for\n */\n // eslint-disable-next-line complexity\n private getUsedEventNames() {\n const input = this.getInput();\n\n // If there is no input, skip before doing any harm\n if (!input) {\n return [];\n }\n\n // Make sure to always use an array of events\n // This is needed because on may be a special value like \"live\"\n const on = normalizeEventAttribute(this.on);\n\n // Filter makes sure to remove empty values, e.g.\n // <syn-validate on=\"\"></syn-validate>\n const [...events] = on.filter(Boolean);\n\n // Make sure to always have an invalid event\n if (!events.includes('invalid')) {\n events.push('invalid');\n }\n\n // Special handling for the live keyword:\n // live always means on input and blur\n if (events.includes('live')) {\n events.push('input');\n events.push('blur');\n }\n\n // Make sure to remove duplicated events and the live property\n // and map the events to the correct event names\n return Array.from(new Set(\n events\n .filter(e => e !== 'live')\n .map(e => getEventNameForElement(input, e)),\n ));\n }\n\n /**\n * Update the events on the input element.\n */\n private updateEvents() {\n this.controller.abort();\n this.controller = new AbortController();\n const input = this.getInput();\n\n if (!input) {\n return;\n }\n\n const events = this.getUsedEventNames();\n events.forEach(eventName => {\n input.addEventListener(eventName, this.validate, {\n capture: isInvalidEvent(eventName),\n signal: this.controller.signal,\n });\n });\n\n // If the change event is not included,\n // make sure to attach a custom listener that resets the validation message\n // This is needed as the custom message may be set on change\n const usedChangeEvent = getEventNameForElement(input, 'change');\n if (!events.includes(usedChangeEvent)) {\n input.addEventListener(usedChangeEvent, this.internalRevalidate, {\n signal: this.controller.signal,\n });\n }\n }\n\n private setValidationMessage(input: HTMLInputElement) {\n const { customValidationMessage } = this;\n const validationMessage = customValidationMessage || input.validationMessage;\n this.validationMessage = validationMessage;\n }\n\n /**\n * Set the custom validation message to the input. This will make sure to either:\n * - use the custom message if one is set or\n * - use the default message if the custom message is empty\n */\n private setCustomValidationMessage(input: HTMLInputElement) {\n // Set the custom validation message on the input only once, when the customValidationMessage\n // is changed. Otherwise there could be problems with `variant=\"native\"` and `on=\"live\"` or\n // `on=\"blur\"`, because the browser popup will never disappear even if clicking somewhere else.\n input.setCustomValidity(this.customValidationMessage);\n }\n\n /**\n * Set the validation message from the input element\n * @param e The event that was received\n */\n private internalRevalidate = (e: Event) => {\n const input = e.currentTarget as HTMLInputElement;\n if (input.validity?.valid) {\n this.validationMessage = '';\n }\n };\n\n /**\n * Handle the blur event during validation\n */\n // eslint-disable-next-line class-methods-use-this\n private handleFocus(input: HTMLInputElement) {\n const activeElement = document.activeElement! as HTMLInputElement;\n const activeElementIsWrapped = activeElement.closest('syn-validate');\n\n if (!activeElement.validity?.valid && activeElementIsWrapped) {\n // The active element is invalid do not scroll\n return;\n }\n\n input.scrollIntoView({ block: 'nearest' });\n input.focus();\n }\n\n /**\n * Triggers a validation run, showing the validation message if needed.\n */\n // eslint-disable-next-line complexity\n private validate = (e: Event) => {\n // Make sure to stop the validate component from going into an endless cycle of triggering\n if (isInvalidEvent(e.type) && this.variant === 'native' && this.isInternalTriggeredInvalid === true) {\n this.isInternalTriggeredInvalid = false;\n return;\n }\n\n // Make sure to always prevent the invalid event when not using native validation\n if (isInvalidEvent(e.type) && this.variant !== 'native') {\n e.preventDefault();\n e.stopPropagation();\n }\n\n const input = e.currentTarget as HTMLInputElement;\n this.isValid = input.validity?.valid;\n\n // When we are using eager, make sure to skip focus on the first mount\n if (this.eager && this.eagerFirstMount) {\n this.eagerFirstMount = false;\n this.setValidationMessage(input);\n return;\n }\n\n // If the active element that has focus is placed in a validate component,\n // make sure to not loose focus.\n if (!this.isValid && !isBlurEvent(e.type)) {\n this.handleFocus(input);\n }\n\n this.setValidationMessage(input);\n\n // Trigger reportValidity when using native validation, so the browser popup is also shown\n // for other events than `invalid`. All events except the blur event, should trigger this.\n if (!isBlurEvent(e.type) && this.variant === 'native') {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n this.updateComplete.then(() => {\n this.isInternalTriggeredInvalid = true;\n input.reportValidity();\n });\n }\n };\n\n async firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.updateEvents();\n\n // #713: Make sure to set the custom validation message on mount\n // When we have a custom element, we need to wait for it to be ready!\n const input = this.getInput();\n\n if (this.customValidationMessage) {\n if (input instanceof SynergyElement) {\n await input.updateComplete;\n }\n input?.setCustomValidity(this.customValidationMessage);\n }\n\n // Make sure to run validation on mount if eager is set\n if (this.eager) {\n await this.updateComplete;\n this.isValid = input?.validity?.valid ?? false;\n input?.reportValidity();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // #717: Make sure to remove to rerun validation when\n // disabled or readonly properties change on the input\n this.observer = new MutationObserver(entries => {\n const input = this.getInput();\n\n if (!input) {\n return;\n }\n\n const hasDisabledOrReadonly = entries\n // Only check for changes on the input element\n .filter(({ target }) => target === input)\n // Check if the input is disabled or readonly\n .every(entry => {\n const target = entry.target as HTMLInputElement;\n return target.hasAttribute('disabled') || target.hasAttribute('readonly');\n });\n\n if (hasDisabledOrReadonly) {\n this.isValid = true;\n this.validationMessage = '';\n } else {\n // When using a synergy element, we need to check the validity after the element is updated,\n // as we cannot rely on the validity state of the element itself.\n // Unfortunately, this depends on used browser :(.\n const waitForPromise = input instanceof SynergyElement\n ? input.updateComplete\n : Promise.resolve();\n\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n waitForPromise.then(() => {\n this.isValid = input?.validity?.valid ?? false;\n this.validationMessage = input?.validationMessage ?? '';\n });\n }\n });\n\n this.observer.observe(this, {\n attributeFilter: ['disabled', 'readonly'],\n attributes: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.controller.abort();\n this?.observer?.disconnect();\n }\n\n private renderInlineValidation() {\n if (this.variant !== 'inline' || !this.validationMessage) {\n return '';\n }\n\n return html`\n <syn-alert\n open\n exportparts=\"base:alert__base,message:alert__message,icon:alert__icon\"\n part=\"alert\"\n variant=\"danger\"\n >\n ${!this.hideIcon\n ? html`<syn-icon slot=\"icon\" name=\"error\" library=\"system\"></syn-icon>`\n : ''\n }\n ${this.validationMessage}\n </syn-alert>\n `;\n }\n\n render() {\n return html`\n <div\n class=\"validate\"\n part=\"base\"\n >\n <slot\n class=\"validate__input-wrapper\"\n part=\"input-wrapper\"\n ></slot>\n \n ${this.renderInlineValidation()}\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/radio-button/radio-button.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 { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } 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 styles from './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\n@enableDefaultSettings('SynRadioButton')\nexport default class SynRadioButton extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n @query('.button') input: HTMLInputElement;\n @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n @state() protected hasFocus = false;\n\n /**\n * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n * it easier to style in button groups.\n */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The radio's value. When selected, the radio group will receive this value. */\n @property() value: string;\n\n /** Disables the radio button. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n * this attribute can typically be omitted.\n */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Draws a pill-style radio button with rounded edges. */\n @property({ type: Boolean, reflect: true }) pill = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'presentation');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.checked = true;\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n /** Sets focus on the radio button. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the radio button. */\n blur() {\n this.input.blur();\n }\n\n render() {\n return html`\n <div part=\"base\" role=\"presentation\">\n <button\n part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n role=\"radio\"\n aria-checked=\"${this.checked}\"\n class=${classMap({\n button: true,\n 'button--default': true,\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n 'button--checked': this.checked,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--outline': true,\n 'button--pill': this.pill,\n 'button--has-label': this.hasSlotController.test('[default]'),\n 'button--has-prefix': this.hasSlotController.test('prefix'),\n 'button--has-suffix': this.hasSlotController.test('suffix')\n })}\n aria-disabled=${this.disabled}\n type=\"button\"\n value=${ifDefined(this.value)}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n >\n <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n <slot part=\"label\" class=\"button__label\"></slot>\n <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n </button>\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/icon/icon.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 { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';\nimport { html } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { property, state } 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 styles from './icon.styles.js';\nimport customStyles from './icon.custom.styles.js';\nimport type { CSSResultGroup, HTMLTemplateResult } from 'lit';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\ninterface IconSource {\n url?: string;\n fromLibrary: boolean;\n}\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport default class SynIcon extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n private initialRender = false;\n\n /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */\n private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {\n let fileData: Response;\n\n if (library?.spriteSheet) {\n this.svg = html`<svg part=\"svg\">\n <use part=\"use\" href=\"${url}\" width=\"100%\" height=\"100%\"></use>\n </svg>`;\n\n return this.svg;\n }\n\n // #806: Make sure to not fetch system icons\n // as they are part of the bundle anyways.\n // This speeds up the loading of the icon.\n if (this.library === 'system') {\n // Skip the icon if the URL is empty\n if (!url) {\n return CACHEABLE_ERROR;\n }\n\n // If the URL is a system icon, we can just return it\n fileData = new Response(url, {\n status: 200,\n });\n } else {\n try {\n fileData = await fetch(url, { mode: 'cors' });\n if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n } catch {\n return RETRYABLE_ERROR;\n }\n }\n\n try {\n const div = document.createElement('div');\n div.innerHTML = await fileData.text();\n\n const svg = div.firstElementChild;\n if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;\n\n if (!parser) parser = new DOMParser();\n const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n const svgEl = doc.body.querySelector('svg');\n if (!svgEl) return CACHEABLE_ERROR;\n\n svgEl.part.add('svg');\n return document.adoptNode(svgEl);\n } catch {\n return CACHEABLE_ERROR;\n }\n }\n\n @state() private svg: SVGElement | HTMLTemplateResult | null = null;\n\n /** The name of the icon to draw. Available names depend on the icon library being used. */\n @property({ reflect: true }) name?: string;\n\n /**\n * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n * can result in XSS attacks.\n */\n @property() src?: string;\n\n /**\n * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n * ignored by assistive devices.\n */\n @property() label = '';\n\n /** The name of a registered custom icon library. */\n @property({ reflect: true }) library = 'default';\n\n connectedCallback() {\n super.connectedCallback();\n watchIcon(this);\n }\n\n firstUpdated() {\n this.initialRender = true;\n this.setIcon();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n unwatchIcon(this);\n }\n\n private getIconSource(): IconSource {\n const library = getIconLibrary(this.library);\n if (this.name && library) {\n return {\n url: library.resolver(this.name),\n fromLibrary: true\n };\n }\n\n return {\n url: this.src,\n fromLibrary: false\n };\n }\n\n @watch('label')\n handleLabelChange() {\n const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n if (hasLabel) {\n this.setAttribute('role', 'img');\n this.setAttribute('aria-label', this.label);\n this.removeAttribute('aria-hidden');\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-label');\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n @watch(['name', 'src', 'library'])\n async setIcon() {\n const { url, fromLibrary } = this.getIconSource();\n const library = fromLibrary ? getIconLibrary(this.library) : undefined;\n\n if (!url) {\n this.svg = null;\n return;\n }\n\n let iconResolver = iconCache.get(url);\n if (!iconResolver) {\n iconResolver = this.resolveIcon(url, library);\n iconCache.set(url, iconResolver);\n }\n\n // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n if (!this.initialRender) {\n return;\n }\n\n const svg = await iconResolver;\n\n if (svg === RETRYABLE_ERROR) {\n iconCache.delete(url);\n }\n\n if (url !== this.getIconSource().url) {\n // If the url has changed while fetching the icon, ignore this request\n return;\n }\n\n if (isTemplateResult(svg)) {\n this.svg = svg;\n\n if (library) {\n // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement\n // to be passed to the library's mutator function.\n await this.updateComplete;\n\n const shadowSVG = this.shadowRoot!.querySelector(\"[part='svg']\")!;\n\n if (typeof library.mutator === 'function' && shadowSVG) {\n library.mutator(shadowSVG as SVGElement);\n }\n }\n\n return;\n }\n\n switch (svg) {\n case RETRYABLE_ERROR:\n case CACHEABLE_ERROR:\n this.svg = null;\n this.emit('syn-error');\n break;\n default:\n this.svg = svg.cloneNode(true) as SVGElement;\n library?.mutator?.(this.svg);\n this.emit('syn-load');\n }\n }\n\n render() {\n return this.svg;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/checkbox/checkbox.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 { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\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 SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\n@enableDefaultSettings('SynCheckbox')\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynCheckbox) => control.defaultChecked,\n setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property() title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\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 /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('syn-change');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n this.formControlController.updateValidity();\n }\n\n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\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.input.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.input.reportValidity();\n }\n\n /**\n * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n * the custom validation message, call this method with an empty string.\n */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n //\n // NOTE: we use a <div> around the label slot because of this Chrome bug.\n //\n // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n //\n return html`\n <div\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-help-text': hasHelpText\n })}\n >\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--small': this.size === 'small',\n 'checkbox--medium': this.size === 'medium',\n 'checkbox--large': this.size === 'large'\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <syn-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n name=\"indeterminate\"\n ></syn-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n <slot></slot>\n </div>\n </label>\n\n <div\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n class=\"form-control__help-text\"\n id=\"help-text\"\n part=\"form-control-help-text\"\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\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/button-group/button-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 { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './button-group.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynButtonGroup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n @state() disableRole = false;\n\n /**\n * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\n * devices when interacting with the control and is strongly recommended.\n */\n @property() label = '';\n\n private handleFocus(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--focus', true);\n }\n\n private handleBlur(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--focus', false);\n }\n\n private handleMouseOver(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--hover', true);\n }\n\n private handleMouseOut(event: Event) {\n const button = findButton(event.target as HTMLElement);\n button?.toggleAttribute('data-syn-button-group__button--hover', false);\n }\n\n private handleSlotChange() {\n const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];\n\n slottedElements.forEach(el => {\n const index = slottedElements.indexOf(el);\n const button = findButton(el);\n\n if (button) {\n button.toggleAttribute('data-syn-button-group__button', true);\n button.toggleAttribute('data-syn-button-group__button--first', index === 0);\n button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);\n button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);\n button.toggleAttribute(\n 'data-syn-button-group__button--radio',\n button.tagName.toLowerCase() === 'syn-radio-button'\n );\n }\n });\n }\n\n render() {\n // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n return html`\n <div\n part=\"base\"\n class=\"button-group\"\n role=\"${this.disableRole ? 'presentation' : 'group'}\"\n aria-label=${this.label}\n @focusout=${this.handleBlur}\n @focusin=${this.handleFocus}\n @mouseover=${this.handleMouseOver}\n @mouseout=${this.handleMouseOut}\n >\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\nfunction findButton(el: HTMLElement) {\n const selector = 'syn-button, syn-radio-button';\n\n // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)\n return el.closest(selector) ?? el.querySelector(selector);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;AAQA,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAgBvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAKW,uBAAc;AAMX,iBAAQ;AAAA;AAAA,EAEZ,YAAY,OAAc;AAChC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,WAAW,OAAc;AAC/B,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,gBAAgB,OAAc;AACpC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,eAAe,OAAc;AACnC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,mBAAmB;AACzB,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC;AAEhF,oBAAgB,QAAQ,QAAM;AAC5B,YAAM,QAAQ,gBAAgB,QAAQ,EAAE;AACxC,YAAM,SAAS,WAAW,EAAE;AAE5B,UAAI,QAAQ;AACV,eAAO,gBAAgB,iCAAiC,IAAI;AAC5D,eAAO,gBAAgB,wCAAwC,UAAU,CAAC;AAC1E,eAAO,gBAAgB,wCAAwC,QAAQ,KAAK,QAAQ,gBAAgB,SAAS,CAAC;AAC9G,eAAO,gBAAgB,uCAAuC,UAAU,gBAAgB,SAAS,CAAC;AAClG,eAAO;AAAA,UACL;AAAA,UACA,OAAO,QAAQ,YAAY,MAAM;AAAA,QACnC;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AAEP,WAAO;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,cAAc,iBAAiB,OAAO;AAAA,qBACtC,KAAK,KAAK;AAAA,oBACX,KAAK,UAAU;AAAA,mBAChB,KAAK,WAAW;AAAA,qBACd,KAAK,eAAe;AAAA,oBACrB,KAAK,cAAc;AAAA;AAAA,4BAEX,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG/C;AACF;AAtEqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAEzC;AAAA,EAAd,MAAM,MAAM;AAAA,GAHM,eAGJ;AAEN;AAAA,EAAR,MAAM;AAAA,GALY,eAKV;AAMG;AAAA,EAAX,SAAS;AAAA,GAXS,eAWP;AA6Dd,SAAS,WAAW,IAAiB;AAjGrC;AAkGE,QAAM,WAAW;AAGjB,UAAO,QAAG,QAAQ,QAAQ,MAAnB,YAAwB,GAAG,cAAc,QAAQ;AAC1D;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/switch/switch.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 { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\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 styles from './switch.styles.js';\nimport customStyles from './switch.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\n@enableDefaultSettings('SynSwitch')\nexport default class SynSwitch extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynSwitch) => control.defaultChecked,\n setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the switch, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the switch, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The switch's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the switch. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the switch in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\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 /** Makes the switch a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.emit('syn-change');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n @watch('checked', { waitUntilFirstUpdate: true })\n handleCheckedChange() {\n this.input.checked = this.checked; // force a sync update\n this.formControlController.updateValidity();\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(true);\n }\n\n /** Simulates a click on the switch. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the switch. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the switch. */\n blur() {\n this.input.blur();\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.input.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.input.reportValidity();\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\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-help-text': hasHelpText\n })}\n >\n <label\n part=\"base\"\n class=${classMap({\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n 'switch--small': this.size === 'small',\n 'switch--medium': this.size === 'medium',\n 'switch--large': this.size === 'large'\n })}\n >\n <input\n class=\"switch__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @keydown=${this.handleKeyDown}\n />\n\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\"></span>\n </span>\n\n <div part=\"label\" class=\"switch__label\">\n <slot></slot>\n </div>\n </label>\n\n <div\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n class=\"form-control__help-text\"\n id=\"help-text\"\n part=\"form-control-help-text\"\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-switch': SynSwitch;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/option/option.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { 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 styles from './option.styles.js';\nimport customStyles from './option.custom.styles.js';\nimport { delimiterToWhiteSpace } from './utility.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option'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 *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynOption extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n // @ts-expect-error - Controller is currently unused\n private readonly localize = new LocalizeController(this);\n\n private isInitialized = false;\n\n @query('.option__label') defaultSlot: HTMLSlotElement;\n\n // the delimiter used to separate multiple values in a select\n // This is provided by the wrapping syn-select\n @state() delimiter = ' ';\n\n @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n @state() selected = false; // the option is selected and has aria-selected=\"true\"\n @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n /**\n * The option's value. When selected, the containing form control will receive this value. The value must be unique\n * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n * multiple values.\n */\n @property({ reflect: true }) value: string | number = '';\n\n /** Draws the option in a disabled state, preventing selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n }\n\n private handleDefaultSlotChange() {\n if (this.isInitialized) {\n // When the label changes, tell the controller to update\n customElements.whenDefined('syn-combobox').then(() => {\n const controller = this.closest('syn-combobox');\n if (controller) {\n controller.handleDefaultSlotChange();\n }\n });\n customElements.whenDefined('syn-select').then(() => {\n const controller = this.closest('syn-select');\n if (controller) {\n controller.handleDefaultSlotChange();\n }\n });\n } else {\n this.isInitialized = true;\n }\n }\n\n private handleMouseEnter() {\n this.hasHover = true;\n }\n\n private handleMouseLeave() {\n this.hasHover = false;\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('selected')\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n\n @watch('value')\n handleValueChange() {\n if (typeof this.value === 'number') {\n return;\n }\n\n // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n // instead of requiring them to cast the value to a string.\n if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n const { delimiter } = this;\n\n if (this.value.includes(delimiter)) {\n console.error(`Option values cannot include \"${delimiter}\". All occurrences of \"${delimiter}\" have been replaced with \"_\".`, this);\n this.value = delimiterToWhiteSpace(this.value, this.delimiter);\n }\n }\n\n /** Returns a plain text label based on the option's content. */\n getTextLabel() {\n const nodes = this.childNodes;\n let label = '';\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n if (!(node as HTMLElement).hasAttribute('slot')) {\n label += (node as HTMLElement).textContent;\n }\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n label += node.textContent;\n }\n });\n\n return label.trim();\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n option: true,\n 'option--current': this.current,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected,\n 'option--hover': this.hasHover\n })}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\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/progress-bar/progress-bar.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-bar.styles.js';\nimport customStyles from './progress-bar.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress bars are used to show the status of an ongoing operation.\n * @documentation https://synergy.style/components/progress-bar\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the progress indicator.\n *\n * @csspart base - The component's base wrapper.\n * @csspart indicator - The progress bar's indicator.\n * @csspart label - The progress bar's label.\n *\n * @cssproperty --height - The progress bar's height.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --label-color - The color of the label.\n * @cssproperty --speed - The speed of the progress bar when in indeterminate state.\n */\nexport default class SynProgressBar extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n private readonly localize = new LocalizeController(this);\n\n /** The current progress as a percentage, 0 to 100. */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** A custom label for assistive devices. */\n @property() label = '';\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n 'progress-bar--rtl': this.localize.dir() === 'rtl'\n })}\n role=\"progressbar\"\n title=${ifDefined(this.title)}\n aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow=${this.indeterminate ? 0 : this.value}\n >\n <div part=\"indicator\" class=\"progress-bar__indicator\" style=${styleMap({ width: `${this.value}%` })}>\n ${!this.indeterminate ? html` <slot part=\"label\" class=\"progress-bar__label\"></slot> ` : ''}\n </div>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAyBzB,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAEE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAGZ,iBAAQ;AAGP,yBAAgB;AAGhD,iBAAQ;AAAA;AAAA,EAEpB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,+BAA+B,KAAK;AAAA,MACpC,qBAAqB,KAAK,SAAS,IAAI,MAAM;AAAA,IAC/C,CAAC,CAAC;AAAA;AAAA,gBAEM,UAAU,KAAK,KAAK,CAAC;AAAA,qBAChB,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA,wBAGhE,KAAK,gBAAgB,IAAI,KAAK,KAAK;AAAA;AAAA,sEAEW,SAAS,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC;AAAA,YAC/F,CAAC,KAAK,gBAAgB,iEAAiE,EAAE;AAAA;AAAA;AAAA;AAAA,EAInG;AACF;AAnCqB,eACZ,SAAyB,CAAC,0BAAiB,6BAAQ,kCAAY;AAI3B;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GALtB,eAKwB;AAGC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARvB,eAQyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAXS,eAWP;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|