@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/file/file.component.ts"],
|
|
4
|
-
"sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { watch } from '../../internal/watch.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.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 SynButton from '../button/button.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './file.styles.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { animateTo } from '../../internal/animate.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n * Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n * Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n * Opening the file dialog on click and as well as drag and drop will work for this content.\n * Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n * *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n * applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */\n@enableDefaultSettings('SynFile')\nexport default class SynFile extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [\n componentStyles,\n formControlStyles,\n formControlCustomStyles,\n styles,\n ];\n\n static dependencies = {\n 'syn-button': SynButton,\n 'syn-icon': SynIcon,\n };\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-change'],\n // This makes sure the value sent in formdata events is always the files object\n // @see internals/form.ts #handleFormData for more information\n value: (el: SynFile) => el.files,\n });\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n private readonly localize = new LocalizeController(this);\n\n @state() private userIsDragging = false;\n\n /**\n * The selected files as a FileList object containing a list of File objects.\n * The FileList behaves like an array, so you can get the number of selected files\n * via its length property.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files\n */\n @property({ type: Object })\n set files(v: FileList | null) {\n if (this.input) {\n this.input.files = v;\n }\n }\n\n get files() {\n return this.input?.files;\n }\n\n /** The name of the file control, submitted as a name/value pair with form data. */\n @property({ type: String }) name = '';\n\n /**\n * The current value of the input, submitted as a name/value pair with form data.\n * Beware that the only valid value when setting a file input is an empty string!\n */\n\n /**\n * The value of the file control contains a string that represents the path of the selected file.\n * If multiple files are selected, the value represents the first file in the list.\n * If no file is selected, the value is an empty string.\n * Beware that the only valid value when setting a file control is an empty string!\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value\n */\n @property({ type: String })\n set value(v: string) {\n if (this.input) {\n this.input.value = v;\n }\n }\n\n get value() {\n return this.input?.value;\n }\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\n\n /** The file control's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The file control's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /**\n * The file control's help text.\n * If you need to display HTML, use the `help-text` slot instead.\n */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Disables the file control. */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n /** Draw the file control as a drop area */\n @property({ type: Boolean }) droparea = false;\n\n /**\n * Comma separated list of supported file types\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n * @example <syn-file accept=\".jpg,.jpeg,.png,.gif,text/plain,image/*\"></syn-file>\n */\n @property({ type: String }) accept = '';\n\n /**\n * Specifies the types of files that the server accepts.\n * Can be set either to user or environment.\n * Works only when not using a droparea!\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture\n */\n @property({ type: String }) capture: 'user' | 'environment';\n\n /**\n * Indicates whether the user can select more than one file.\n * Has no effect if webkitdirectory is set.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple\n */\n @property({ reflect: true, type: Boolean }) multiple = false;\n\n /**\n * Indicates that the file control should let the user select directories instead of files.\n * When a directory is selected, the directory and its entire hierarchy of contents are included\n * in the set of selected items.\n * Note: This is a non-standard attribute but is supported in the major browsers.\n * [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory\n */\n @property({ reflect: true, type: Boolean }) webkitdirectory = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element.\n * This attribute allows you to place the form control outside of a form and associate it\n * with the form that has this `id`. The form must be in the same document\n * or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the input a required field. */\n @property({ reflect: true, type: Boolean }) required = false;\n\n /** Suppress the value from being displayed in the file control */\n @property({ attribute: 'hide-value', type: Boolean }) hideValue = false;\n\n @query('.input__control') input: HTMLInputElement;\n\n @query('.button') button: SynButton;\n\n @query('.droparea') dropareaWrapper: HTMLDivElement;\n\n @query('.droparea__icon') dropareaIcon: HTMLSpanElement;\n\n @query('.input__value') inputChosen: HTMLSpanElement;\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 /**\n * Checks for validity but does not show a validation message.\n * Returns `true` when valid and `false` when invalid.\n */\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 @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the button or droparea. */\n focus(options?: FocusOptions) {\n if (this.droparea) {\n this.dropareaWrapper?.focus(options);\n return;\n }\n\n this.button?.focus(options);\n }\n\n /** Removes focus from the button or droparea. */\n blur() {\n if (this.droparea) {\n this.dropareaWrapper?.blur();\n return;\n }\n\n this.button?.blur();\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFiles(files: FileList | null) {\n if (!files) {\n this.value = '';\n return;\n }\n this.files = files;\n }\n\n private async handleTransferItems(items: DataTransferItemList | null): Promise<FileList> {\n if (!items) {\n this.value = '';\n return new Promise((_resolve, reject) => { reject(new Error('No proper items found')); });\n }\n\n const entries = Array\n .from(items)\n .map(item => item.webkitGetAsEntry());\n\n const filesPromises = entries.map(entry => this.getFilesFromEntry(entry));\n const filesArray = await Promise.all(filesPromises);\n const files = filesArray.flat();\n\n const dataTransfer = new DataTransfer();\n Array.from(files).forEach(f => dataTransfer.items.add(f));\n return dataTransfer.files;\n }\n\n private async getFilesFromEntry(entry: FileSystemEntry | null): Promise<File[]> {\n if (!entry) {\n return [];\n }\n if (entry.isFile) {\n return new Promise<File[]>((resolve, reject) => {\n (entry as FileSystemFileEntry).file(file => resolve([file]), reject);\n });\n }\n if (entry.isDirectory) {\n return new Promise<File[]>((resolve, reject) => {\n const dirReader = (entry as FileSystemDirectoryEntry).createReader();\n dirReader.readEntries((entries) => {\n Promise.all(entries.map(e => this.getFilesFromEntry(e)))\n .then((files) => { resolve(files.flat()); })\n .catch(reject);\n });\n });\n }\n return [];\n }\n\n private handleClick(e: Event) {\n e.preventDefault();\n this.input.click();\n }\n\n /** Handles the change event of the native input */\n private handleChange(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n\n this.emit('syn-input');\n this.emit('syn-change');\n }\n\n private handleDragOver(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n this.userIsDragging = true;\n }\n\n private handleDragLeave(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n this.userIsDragging = false;\n }\n\n // eslint-disable-next-line complexity\n private async handleDrop(e: DragEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n if (!e.dataTransfer) {\n return;\n }\n\n const files = await this.handleTransferItems(e.dataTransfer?.items);\n\n this.userIsDragging = false;\n\n if (!files) {\n return;\n }\n\n // webkitdirectory also allows multiple files\n if (!this.multiple && !this.webkitdirectory && files.length > 1) {\n this.emit('syn-error');\n return;\n }\n\n // Use the transferred file list from the drag drop interface\n const hasTrigger = this.hasSlotController.test('trigger');\n if (!hasTrigger) {\n const disappearAnimation = getAnimation(this.inputChosen, 'file.text.disappear', { dir: this.localize.dir() });\n const appearAnimation = getAnimation(this.inputChosen, 'file.text.appear', { dir: this.localize.dir() });\n\n if (this.droparea) {\n const dropIconAnimation = getAnimation(this.dropareaIcon, 'file.iconDrop', { dir: this.localize.dir() });\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n animateTo(this.dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);\n }\n // eslint-disable-next-line max-len\n await animateTo(this.inputChosen, disappearAnimation.keyframes, disappearAnimation.options);\n this.handleFiles(files);\n await animateTo(this.inputChosen, appearAnimation.keyframes, appearAnimation.options);\n } else {\n this.handleFiles(files);\n }\n\n this.input.dispatchEvent(new Event('change'));\n }\n\n /**\n * Handle the focus of the droparea and emit focus event\n */\n private handleFocus() {\n this.emit('syn-focus');\n }\n\n /**\n * Handle the blur of the droparea and emit blur event\n */\n private handleBlur() {\n this.emit('syn-blur');\n }\n\n private renderValue() {\n let hasFiles = false;\n let fileChosenLabel = this.localize.term('numFilesSelected', 0, this.webkitdirectory);\n\n if (this.files && this.files?.length > 0) {\n hasFiles = true;\n fileChosenLabel = this.files.length === 1\n ? this.files[0].name\n : this.localize.term('numFilesSelected', this.files.length, this.webkitdirectory);\n }\n\n return html`\n <span\n class=${classMap({\n input__value: true,\n 'input__value--hidden': this.hideValue,\n 'input__value--placeholder': !hasFiles,\n })}\n part=\"value\"\n >\n ${fileChosenLabel}\n </span>\n `;\n }\n\n /* eslint-disable @typescript-eslint/unbound-method */\n private renderDroparea() {\n return html`\n <div\n class=\"droparea\"\n @click=${this.handleClick}\n @keypress=${this.handleClick}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n tabindex=${this.disabled ? -1 : 0}\n part=\"droparea\"\n >\n <div\n class=\"droparea__background\"\n part=\"droparea-background\"\n >\n <span part=\"droparea-icon\" class=\"droparea__icon\">\n <slot name=\"droparea-icon\">\n <syn-icon name=\"upload-file\" library=\"system\" ></syn-icon>\n </slot>\n </span>\n <p\n class=\"droparea__text\"\n part=\"droparea-value\"\n >\n <strong>${this.localize.term(this.webkitdirectory ? 'folderDragDrop' : 'fileDragDrop')}</strong>\n ${this.renderValue()}\n </p>\n </div>\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n\n /* eslint-disable @typescript-eslint/unbound-method */\n private renderButton() {\n let buttonText = this.localize.term('fileButtonText');\n if (this.multiple) {\n buttonText = this.localize.term('fileButtonTextMultiple');\n }\n if (this.webkitdirectory) {\n buttonText = this.localize.term('folderButtonText');\n }\n\n return html`\n <div\n class=\"button__wrapper\"\n part=\"button-wrapper\"\n >\n <syn-button\n class=\"button\"\n @click=${this.handleClick}\n ?disabled=${this.disabled}\n exportparts=\"base:button__base\"\n part=\"button\"\n size=${this.size}\n variant=\"outline\"\n >\n ${buttonText}\n </syn-button>\n ${this.renderValue()}\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n\n /* eslint-disable @typescript-eslint/unbound-method */\n // eslint-disable-next-line complexity\n render() {\n const hasLabel = this.label || !!this.hasSlotController.test('label');\n const hasHelpText = this.helpText ? true : !!this.hasSlotController.test('help-text');\n const hasTrigger = !!this.hasSlotController.test('trigger');\n\n return html`\n <div\n class=${classMap({\n 'form-control': true,\n 'form-control--droparea': this.droparea,\n 'form-control--has-help-text': hasHelpText,\n 'form-control--has-label': hasLabel,\n 'form-control--large': this.size === 'large',\n 'form-control--medium': this.size === 'medium',\n 'form-control--small': this.size === 'small',\n 'form-control--user-dragging': this.userIsDragging,\n })}\n @dragenter=${this.handleDragOver}\n @dragleave=${this.handleDragLeave}\n @dragover=${this.handleDragOver}\n @drop=${this.handleDrop}\n part=\"form-control\"\n >\n ${\n hasTrigger\n ? html`\n <slot \n @click=${this.handleClick}\n @keypress=${this.handleClick}\n name=\"trigger\"\n part=\"trigger\"\n ></slot>\n `\n : html`\n <label\n aria-hidden=${hasLabel ? 'false' : 'true'}\n class=\"form-control__label\"\n for=\"input\"\n part=\"form-control-label\"\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=\"form-control-input\"\n part=\"form-control-input\"\n >\n\n ${this.droparea ? this.renderDroparea() : this.renderButton()}\n </div>\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 `\n }\n <input\n accept=${this.accept}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n class=\"input__control\"\n ?disabled=${this.disabled}\n id=\"input\"\n @invalid=${this.handleInvalid}\n ?multiple=${this.multiple}\n name=${ifDefined(this.name)}\n ?required=${this.required}\n type=\"file\"\n tabindex=\"-1\"\n ?webkitdirectory=${this.webkitdirectory}\n >\n </div>\n `;\n }\n /* eslint-enable @typescript-eslint/unbound-method */\n}\n\nsetDefaultAnimation('file.iconDrop', {\n keyframes: [\n { scale: 1 },\n { scale: 0.7 },\n { scale: 1 },\n ],\n options: { duration: 600, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('file.text.disappear', {\n keyframes: [\n { opacity: 1 },\n { opacity: 0, transform: 'translateY(-40%)' },\n ],\n options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n\nsetDefaultAnimation('file.text.appear', {\n keyframes: [\n { opacity: 0, transform: 'translateY(40%)' },\n { opacity: 1 },\n ],\n options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\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 './breadcrumb-item.styles.js';\nimport customStyles from './breadcrumb-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */\nexport default class SynBreadcrumbItem extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';\n\n /**\n * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\n * internally. When unset, a button will be rendered instead.\n */\n @property() href?: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n /** The `rel` attribute to use on the link. Only used when `href` is set. */\n @property() rel = 'noreferrer noopener';\n\n private setRenderType() {\n const hasDropdown =\n this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')\n .length > 0;\n\n if (this.href) {\n this.renderType = 'link';\n return;\n }\n\n if (hasDropdown) {\n this.renderType = 'dropdown';\n return;\n }\n\n this.renderType = 'button';\n }\n\n @watch('href', { waitUntilFirstUpdate: true })\n hrefChanged() {\n this.setRenderType();\n }\n\n handleSlotChange() {\n this.setRenderType();\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'breadcrumb-item': true,\n 'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),\n 'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')\n })}\n >\n <span part=\"prefix\" class=\"breadcrumb-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n\n ${this.renderType === 'link'\n ? html`\n <a\n part=\"label\"\n class=\"breadcrumb-item__label breadcrumb-item__label--link\"\n href=\"${this.href!}\"\n target=\"${ifDefined(this.target ? this.target : undefined)}\"\n rel=${ifDefined(this.target ? this.rel : undefined)}\n >\n <slot @slotchange=${this.handleSlotChange}></slot>\n </a>\n `\n : ''}\n ${this.renderType === 'button'\n ? html`\n <button part=\"label\" type=\"button\" class=\"breadcrumb-item__label breadcrumb-item__label--button\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </button>\n `\n : ''}\n ${this.renderType === 'dropdown'\n ? html`\n <div part=\"label\" class=\"breadcrumb-item__label breadcrumb-item__label--drop-down\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `\n : ''}\n\n <span part=\"suffix\" class=\"breadcrumb-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n\n <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n <slot name=\"separator\"></slot>\n </span>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA0BvC,IAAqB,oBAArB,cAA+C,eAAe;AAAA,EAA9D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,QAAQ;AAI1E,SAAQ,aAA6C;AAYlD,eAAM;AAAA;AAAA,EAEV,gBAAgB;AACtB,UAAM,cACJ,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,cAAc,EACxG,SAAS;AAEd,QAAI,KAAK,MAAM;AACb,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,QAAI,aAAa;AACf,WAAK,aAAa;AAClB;AAAA,IACF;AAEA,SAAK,aAAa;AAAA,EACpB;AAAA,EAGA,cAAc;AACZ,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,mBAAmB;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACnE,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IACrE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,KAAK,eAAe,SAClB;AAAA;AAAA;AAAA;AAAA,wBAIY,KAAK,IAAK;AAAA,0BACR,UAAU,KAAK,SAAS,KAAK,SAAS,MAAS,CAAC;AAAA,sBACpD,UAAU,KAAK,SAAS,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,oCAE/B,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,UACJ,KAAK,eAAe,WAClB;AAAA;AAAA,oCAEwB,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,UACJ,KAAK,eAAe,aAClB;AAAA;AAAA,oCAEwB,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ;AACF;AApGqB,kBACZ,SAAyB,CAAC,0BAAiB,gCAAQ,qCAAY;AAI3C;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GALN,kBAKQ;AAEV;AAAA,EAAhB,MAAM;AAAA,GAPY,kBAOF;AAML;AAAA,EAAX,SAAS;AAAA,GAbS,kBAaP;AAGA;AAAA,EAAX,SAAS;AAAA,GAhBS,kBAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,kBAmBP;AAqBZ;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAvC1B,kBAwCnB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/tab/tab.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab.styles.js';\nimport customStyles from './tab.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy.style/components/tab\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport default class SynTab extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private readonly localize = new LocalizeController(this);\n\n private readonly attrId = ++id;\n private readonly componentId = `syn-tab-${this.attrId}`;\n\n @query('.tab') tab: HTMLElement;\n\n /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n @property({ reflect: true }) panel = '';\n\n /** Draws the tab in an active state. */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /** Makes the tab closable and shows a close button. */\n @property({ type: Boolean, reflect: true }) closable = false;\n\n /** Disables the tab and prevents selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * @internal\n * Need to wrap in a `@property()` otherwise CustomElement throws a \"The result must not have attributes\" runtime error.\n */\n @property({ type: Number, reflect: true }) tabIndex = 0;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n }\n\n private handleCloseClick(event: Event) {\n event.stopPropagation();\n this.emit('syn-close');\n }\n\n @watch('active')\n handleActiveChange() {\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n if (this.disabled && !this.active) {\n this.tabIndex = -1;\n } else {\n this.tabIndex = 0;\n }\n }\n\n render() {\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n this.id = this.id.length > 0 ? this.id : this.componentId;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n tab: true,\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled\n })}\n >\n <slot></slot>\n ${this.closable\n ? html`\n <syn-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n name=\"x-lg\"\n library=\"system\"\n label=${this.localize.term('close')}\n class=\"tab__close-button\"\n @click=${this.handleCloseClick}\n tabindex=\"-1\"\n ></syn-icon-button>\n `\n : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-tab': SynTab;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAShC,IAAI,KAAK;AAkBT,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAEvD,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,WAAW,KAAK,MAAM;AAKxB,iBAAQ;AAGO,kBAAS;AAGT,oBAAW;AAGX,oBAAW;AAMZ,oBAAW;AAAA;AAAA,EAEtD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,iBAAiB,OAAc;AACrC,UAAM,gBAAgB;AACtB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,iBAAiB,KAAK,SAAS,SAAS,OAAO;AAAA,EACnE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAEnE,QAAI,KAAK,YAAY,CAAC,KAAK,QAAQ;AACjC,WAAK,WAAW;AAAA,IAClB,OAAO;AACL,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,SAAS;AAEP,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAE9C,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,MACtB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,OAAO,CAAC;AAAA;AAAA,yBAE1B,KAAK,gBAAgB;AAAA;AAAA;AAAA,gBAIlC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAvFqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAO1C;AAAA,EAAd,MAAM,MAAM;AAAA,GATM,OASJ;AAGc;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAZR,OAYU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,OAeyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,OAkByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,OAqByB;AAMD;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,OA2BwB;AAa3C;AAAA,EADC,MAAM,QAAQ;AAAA,GAvCI,OAwCnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GA5CE,OA6CnB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/menu/menu.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n @query('slot') defaultSlot: HTMLSlotElement;\n @state() hasMenuItemsWithCheckmarks = false;\n\n private handleUpdateCheckmarks(items: SynMenuItem[]) {\n // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states\n // The loading indicator has to be checked as well, as it's specially placed over the check mark\n this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading); \n }\n\n private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {\n e.stopImmediatePropagation();\n this.handleUpdateCheckmarks(this.getAllItems());\n };\n \n disconnectedCallback() {\n this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n }\n\n private handleClick(event: MouseEvent) {\n const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n const composedPath = event.composedPath();\n const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n if (!target) return;\n\n const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');\n const clickHasSubmenu = closestMenu !== this;\n\n // Make sure we're the menu thats supposed to be handling the click event.\n if (clickHasSubmenu) return;\n\n // This isn't true. But we use it for TypeScript checks below.\n const item = target as SynMenuItem;\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('syn-select', { detail: { item } });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter or space\n if (event.key === 'Enter' || event.key === ' ') {\n const item = this.getCurrentItem();\n event.preventDefault();\n event.stopPropagation();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Move the selection when pressing down or up\n else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n event.stopPropagation();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as SynMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n this.handleUpdateCheckmarks(items);\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'syn-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }) as SynMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: SynMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n render() {\n return html`\n <slot\n class=${classMap({\n 'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,\n })}\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/dialog/dialog.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { blurActiveElement } from '../../internal/closeActiveElement.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport Modal from '../../internal/modal.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './dialog.styles.js';\nimport customStyles from './dialog.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n * @documentation https://synergy.style/components/dialog\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @event syn-show - Emitted when the dialog opens.\n * @event syn-after-show - Emitted after the dialog opens and all animations are complete.\n * @event syn-hide - Emitted when the dialog closes.\n * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the dialog.\n * @csspart panel - The dialog's panel (where the dialog and its content are rendered).\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.\n * @csspart title - The dialog's title.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.\n * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.\n * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n * trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when\n * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.\n */\nexport default class SynDialog extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = {\n 'syn-icon-button': SynIconButton\n };\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n private readonly localize = new LocalizeController(this);\n private originalTrigger: HTMLElement | null;\n public modal = new Modal(this);\n private closeWatcher: CloseWatcher | null;\n\n @query('.dialog') dialog: HTMLElement;\n @query('.dialog__panel') panel: HTMLElement;\n @query('.dialog__overlay') overlay: HTMLElement;\n\n /**\n * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n */\n @property({ reflect: true }) label = '';\n\n /**\n * Disables the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the dialog.\n */\n @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n firstUpdated() {\n this.dialog.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n this.modal.activate();\n lockBodyScrolling(this);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n unlockBodyScrolling(this);\n this.removeOpenListeners();\n }\n\n private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n const slRequestClose = this.emit('syn-request-close', {\n cancelable: true,\n detail: { source }\n });\n\n if (slRequestClose.defaultPrevented) {\n const animation = getAnimation(this, 'dialog.denyClose', { dir: this.localize.dir() });\n animateTo(this.panel, animation.keyframes, animation.options);\n return;\n }\n\n this.hide();\n }\n\n private addOpenListeners() {\n if ('CloseWatcher' in window) {\n this.closeWatcher?.destroy();\n this.closeWatcher = new CloseWatcher();\n this.closeWatcher.onclose = () => this.requestClose('keyboard');\n } else {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n }\n\n private removeOpenListeners() {\n this.closeWatcher?.destroy();\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopPropagation();\n this.requestClose('keyboard');\n }\n };\n\n @watch('open', { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.emit('syn-show');\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n this.modal.activate();\n\n lockBodyScrolling(this);\n\n // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause\n // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call\n // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.\n //\n // Related: https://github.com/synergy-design-system/synergy/issues/693\n //\n const autoFocusTarget = this.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n this.dialog.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const slInitialFocus = this.emit('syn-initial-focus', { cancelable: true });\n\n if (!slInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n const panelAnimation = getAnimation(this, 'dialog.show', { dir: this.localize.dir() });\n const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: this.localize.dir() });\n await Promise.all([\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n ]);\n\n this.emit('syn-after-show');\n } else {\n // Hide\n blurActiveElement(this);\n this.emit('syn-hide');\n this.removeOpenListeners();\n this.modal.deactivate();\n\n await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n const panelAnimation = getAnimation(this, 'dialog.hide', { dir: this.localize.dir() });\n const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: this.localize.dir() });\n\n // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n // unexpectedly. We'll unhide them after all animations have completed.\n await Promise.all([\n animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n this.overlay.hidden = true;\n }),\n animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n this.panel.hidden = true;\n })\n ]);\n\n this.dialog.hidden = true;\n\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n\n unlockBodyScrolling(this);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n this.emit('syn-after-hide');\n }\n }\n\n /** Shows the dialog. */\n async show() {\n if (this.open) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'syn-after-show');\n }\n\n /** Hides the dialog */\n async hide() {\n if (!this.open) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'syn-after-hide');\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': this.hasSlotController.test('footer')\n })}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n\n <div\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? 'false' : 'true'}\n aria-label=${ifDefined(this.noHeader ? this.label : undefined)}\n aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}\n tabindex=\"-1\"\n >\n ${!this.noHeader\n ? html`\n <header part=\"header\" class=\"dialog__header\">\n <h2 part=\"title\" class=\"dialog__title\" id=\"title\">\n <slot name=\"label\"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>\n </h2>\n <div part=\"header-actions\" class=\"dialog__header-actions\">\n <slot name=\"header-actions\"></slot>\n <syn-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close\"\n name=\"x-lg\"\n label=${this.localize.term('close')}\n library=\"system\"\n @click=\"${() => this.requestClose('close-button')}\"\n ></syn-icon-button>\n </div>\n </header>\n `\n : ''}\n ${\n '' /* The tabindex=\"-1\" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex=\"-1\" on the slot causes children to not be focusable. https://github.com/synergy-design-system/synergy/issues/1753#issuecomment-1836803277 */\n }\n <div part=\"body\" class=\"dialog__body\" tabindex=\"-1\"><slot></slot></div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation('dialog.show', {\n keyframes: [\n { opacity: 0, scale: 0.8 },\n { opacity: 1, scale: 1 }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.hide', {\n keyframes: [\n { opacity: 1, scale: 1 },\n { opacity: 0, scale: 0.8 }\n ],\n options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('dialog.denyClose', {\n keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.show', {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n options: { duration: 250 }\n});\n\nsetDefaultAnimation('dialog.overlay.hide', {\n keyframes: [{ opacity: 1 }, { opacity: 0 }],\n options: { duration: 250 }\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/progress-ring/progress-ring.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 { LocalizeController } from '../../utilities/localize.js';\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 './progress-ring.styles.js';\nimport customStyles from './progress-ring.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://synergy.style/components/progress-ring\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */\nexport default class SynProgressRing extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n private readonly localize = new LocalizeController(this);\n\n @query('.progress-ring__indicator') indicator: SVGCircleElement;\n\n @state() indicatorOffset: string;\n\n /** The current progress as a percentage, 0 to 100. */\n @property({ type: Number, reflect: true }) value = 0;\n\n /** A custom label for assistive devices. */\n @property() label = '';\n\n updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps);\n\n //\n // This block is only required for Safari because it doesn't transition the circle when the custom properties\n // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,\n // but I couldn't pinpoint it so this works around the problem.\n //\n if (changedProps.has('value')) {\n const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));\n const circumference = 2 * Math.PI * radius;\n const offset = circumference - (this.value / 100) * circumference;\n\n this.indicatorOffset = `${offset}px`;\n }\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=\"progress-ring\"\n role=\"progressbar\"\n aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n aria-describedby=\"label\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow=\"${this.value}\"\n style=\"--percentage: ${this.value / 100}\"\n >\n <svg class=\"progress-ring__image\">\n <circle class=\"progress-ring__track\"></circle>\n <circle class=\"progress-ring__indicator\" style=\"stroke-dashoffset: ${this.indicatorOffset}\"></circle>\n </svg>\n\n <slot id=\"label\" part=\"label\" class=\"progress-ring__label\"></slot>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,kBAArB,cAA6C,eAAe;AAAA,EAA5D;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAOZ,iBAAQ;AAGvC,iBAAQ;AAAA;AAAA,EAEpB,QAAQ,cAAoC;AAC1C,UAAM,QAAQ,YAAY;AAO1B,QAAI,aAAa,IAAI,OAAO,GAAG;AAC7B,YAAM,SAAS,WAAW,iBAAiB,KAAK,SAAS,EAAE,iBAAiB,GAAG,CAAC;AAChF,YAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,YAAM,SAAS,gBAAiB,KAAK,QAAQ,MAAO;AAEpD,WAAK,kBAAkB,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI/D,KAAK,KAAK;AAAA,+BACJ,KAAK,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,+EAIgC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjG;AACF;AAtDqB,gBACZ,SAAyB,CAAC,0BAAiB,8BAAQ,mCAAY;AAIlC;AAAA,EAAnC,MAAM,2BAA2B;AAAA,GALf,gBAKiB;AAE3B;AAAA,EAAR,MAAM;AAAA,GAPY,gBAOV;AAGkC;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAVtB,gBAUwB;AAG/B;AAAA,EAAX,SAAS;AAAA,GAbS,gBAaP;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/internal/scrollend-polyfill.ts", "../../src/components/tab-group/tab-group.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\ntype GenericCallback = (this: unknown, ...args: unknown[]) => unknown;\n\ntype MethodOf<T, K extends keyof T> = T[K] extends GenericCallback ? T[K] : never;\n\nconst debounce = <T extends GenericCallback>(fn: T, delay: number) => {\n let timerId = 0;\n\n return function (this: unknown, ...args: unknown[]) {\n window.clearTimeout(timerId);\n timerId = window.setTimeout(() => {\n fn.call(this, ...args);\n }, delay);\n };\n};\n\nconst decorate = <T, M extends keyof T>(\n proto: T,\n method: M,\n decorateFn: (this: unknown, superFn: T[M], ...args: unknown[]) => unknown\n) => {\n const superFn = proto[method] as MethodOf<T, M>;\n\n proto[method] = function (this: unknown, ...args: unknown[]) {\n superFn.call(this, ...args);\n decorateFn.call(this, superFn, ...args);\n } as MethodOf<T, M>;\n};\n\n(() => {\n // SSR environments should not apply the polyfill\n if (typeof window === 'undefined') {\n return;\n }\n\n const isSupported = 'onscrollend' in window;\n\n if (!isSupported) {\n const pointers = new Set();\n const scrollHandlers = new WeakMap<EventTarget, EventListenerOrEventListenerObject>();\n\n const handlePointerDown = (event: TouchEvent) => {\n for (const touch of event.changedTouches) {\n pointers.add(touch.identifier);\n }\n };\n\n const handlePointerUp = (event: TouchEvent) => {\n for (const touch of event.changedTouches) {\n pointers.delete(touch.identifier);\n }\n };\n\n document.addEventListener('touchstart', handlePointerDown, true);\n document.addEventListener('touchend', handlePointerUp, true);\n document.addEventListener('touchcancel', handlePointerUp, true);\n\n decorate(EventTarget.prototype, 'addEventListener', function (this: EventTarget, addEventListener, type) {\n if (type !== 'scrollend') return;\n\n const handleScrollEnd = debounce(() => {\n if (!pointers.size) {\n // If no pointer is active in the scroll area then the scroll has ended\n this.dispatchEvent(new Event('scrollend'));\n } else {\n // otherwise let's wait a bit more\n handleScrollEnd();\n }\n }, 100);\n\n addEventListener.call(this, 'scroll', handleScrollEnd, { passive: true });\n scrollHandlers.set(this, handleScrollEnd);\n });\n\n decorate(EventTarget.prototype, 'removeEventListener', function (this: EventTarget, removeEventListener, type) {\n if (type !== 'scrollend') return;\n\n const scrollHandler = scrollHandlers.get(this);\n if (scrollHandler) {\n removeEventListener.call(this, 'scroll', scrollHandler, { passive: true } as unknown as EventListenerOptions);\n }\n });\n }\n})();\n\n// Without an import or export, TypeScript sees vars in this file as global\nexport {};\n", "/**\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 '../../internal/scrollend-polyfill.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { eventOptions, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport SynResizeObserver from '../resize-observer/resize-observer.component.js';\nimport styles from './tab-group.styles.js';\nimport customStyles from './tab-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynTab from '../tab/tab.js';\nimport type SynTabPanel from '../tab-panel/tab-panel.js';\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport default class SynTabGroup extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton, 'syn-resize-observer': SynResizeObserver };\n\n private activeTab?: SynTab;\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n @queryAssignedElements({ slot: 'nav', selector: 'syn-tab' }) tabs: SynTab[];;\n private focusableTabs: SynTab[] = [];\n @queryAssignedElements({ selector: 'syn-tab-panel' }) panels: SynTabPanel[];;\n private readonly localize = new LocalizeController(this);\n\n @query('.tab-group') tabGroup: HTMLElement;\n @query('.tab-group__body') body: HTMLSlotElement;\n @query('.tab-group__nav') nav: HTMLElement;\n @query('.tab-group__indicator') indicator: HTMLElement;\n\n @state() private hasScrollControls = false;\n\n @state() private shouldHideScrollStartButton = false;\n @state() private shouldHideScrollEndButton = false;\n\n /** The placement of the tabs. */\n @property() placement: 'top' | 'start' | 'end' = 'top';\n\n /**\n * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\n * manual, the tab will receive focus but will not show until the user presses spacebar or enter.\n */\n @property() activation: 'auto' | 'manual' = 'auto';\n\n /** Disables the scroll arrows that appear when tabs overflow. */\n @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;\n\n /** Draws the tab group as a contained element. */\n @property({ type: Boolean }) contained = false;\n \n /** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */\n @property({ type: Boolean }) sharp = false;\n\n /** Prevent scroll buttons from being hidden when inactive. */\n @property({ attribute: 'fixed-scroll-controls', type: Boolean }) fixedScrollControls = false;\n\n connectedCallback() {\n const whenAllDefined = Promise.all([\n customElements.whenDefined('syn-tab'),\n customElements.whenDefined('syn-tab-panel')\n ]);\n\n super.connectedCallback();\n\n this.resizeObserver = new ResizeObserver(() => {\n this.repositionIndicator();\n this.updateScrollControls();\n });\n\n this.mutationObserver = new MutationObserver(mutations => {\n // Make sure to only observe the direct children of the tab group\n // instead of other sub elements that might be slotted in.\n // @see https://github.com/synergy-design-system/synergy/issues/2320\n const instanceMutations = mutations.filter(({ target }) => {\n if (target === this) return true; // Allow self updates\n if ((target as HTMLElement).closest('syn-tab-group') !== this) return false; // We are not direct children\n\n // We should only care about changes to the tab or tab panel\n const tagName = (target as HTMLElement).tagName.toLowerCase();\n return tagName === 'syn-tab' || tagName === 'syn-tab-panel';\n });\n\n if (instanceMutations.length === 0) {\n return;\n }\n\n // Update aria labels when the DOM changes\n if (instanceMutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName!))) {\n setTimeout(() => this.setAriaLabels());\n }\n\n // Sync tabs when disabled states change\n if (instanceMutations.some(m => m.attributeName === 'disabled')) {\n this.syncTabsAndPanels();\n // sync tabs when active state on tab changes\n } else if (instanceMutations.some(m => m.attributeName === 'active')) {\n const tabs = instanceMutations\n .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'syn-tab')\n .map(m => m.target as SynTab);\n const newActiveTab = tabs.find(tab => tab.active);\n\n if (newActiveTab) {\n this.setActiveTab(newActiveTab);\n }\n }\n });\n\n // After the first update...\n this.updateComplete.then(() => {\n this.syncTabsAndPanels();\n\n this.mutationObserver.observe(this, {\n attributes: true,\n attributeFilter: ['active', 'disabled', 'name', 'panel'],\n childList: true,\n subtree: true\n });\n\n this.resizeObserver.observe(this.nav);\n\n // Wait for tabs and tab panels to be registered\n whenAllDefined.then(() => {\n // Set initial tab state when the tabs become visible\n const intersectionObserver = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n observer.unobserve(entries[0].target);\n }\n });\n intersectionObserver.observe(this.tabGroup);\n });\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.mutationObserver?.disconnect();\n\n if (this.nav) {\n this.resizeObserver?.unobserve(this.nav);\n }\n }\n\n private getActiveTab() {\n return this.tabs.find(el => el.active);\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n const tab = target.closest('syn-tab');\n const tabGroup = tab?.closest('syn-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this) {\n return;\n }\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n if (tab !== null) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = this.tabs.find(t => t.matches(':focus'));\n const isRtl = this.localize.dir() === 'rtl';\n let nextTab: null | SynTab = null;\n\n if (activeEl?.tagName.toLowerCase() === 'syn-tab') {\n if (event.key === 'Home') {\n nextTab = this.focusableTabs[0];\n } else if (event.key === 'End') {\n nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')\n ) {\n const currentIndex = this.tabs.findIndex(el => el === activeEl);\n nextTab = this.findNextFocusableTab(currentIndex, 'backward');\n } else if (\n (['top'].includes(this.placement) && event.key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) ||\n (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')\n ) {\n const currentIndex = this.tabs.findIndex(el => el === activeEl);\n nextTab = this.findNextFocusableTab(currentIndex, 'forward');\n }\n\n if (!nextTab) {\n return;\n }\n\n nextTab.tabIndex = 0;\n nextTab.focus({ preventScroll: true });\n\n if (this.activation === 'auto') {\n this.setActiveTab(nextTab, { scrollBehavior: 'smooth' });\n } else {\n this.tabs.forEach(tabEl => {\n tabEl.tabIndex = tabEl === nextTab ? 0 : -1;\n });\n }\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(nextTab, this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n }\n\n private handleScrollToStart() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft + this.nav.clientWidth\n : this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private handleScrollToEnd() {\n this.nav.scroll({\n left:\n this.localize.dir() === 'rtl'\n ? this.nav.scrollLeft - this.nav.clientWidth\n : this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth'\n });\n }\n\n private setActiveTab(tab: SynTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {\n options = {\n emitEvents: true,\n scrollBehavior: 'auto',\n ...options\n };\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync active tab and panel\n this.tabs.forEach(el => {\n el.active = el === this.activeTab;\n el.tabIndex = el === this.activeTab ? 0 : -1;\n });\n this.panels.forEach(el => (el.active = el.name === this.activeTab?.panel));\n this.syncIndicator();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);\n }\n\n // Emit events\n if (options.emitEvents) {\n if (previousTab) {\n this.emit('syn-tab-hide', { detail: { name: previousTab.panel } });\n }\n\n this.emit('syn-tab-show', { detail: { name: this.activeTab.panel } });\n }\n }\n }\n\n private setAriaLabels() {\n // Link each tab with its corresponding panel\n this.tabs.forEach(tab => {\n const panel = this.panels.find(el => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id')!);\n panel.setAttribute('aria-labelledby', tab.getAttribute('id')!);\n }\n });\n }\n\n private repositionIndicator() {\n const currentTab = this.getActiveTab();\n\n if (!currentTab) {\n return;\n }\n\n const width = currentTab.clientWidth;\n const height = currentTab.clientHeight;\n const isRtl = this.localize.dir() === 'rtl';\n\n // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect\n // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n const precedingTabs = this.tabs.slice(0, this.tabs.indexOf(currentTab));\n const offset = precedingTabs.reduce(\n (previous, current) => ({\n left: previous.left + current.clientWidth,\n top: previous.top + current.clientHeight\n }),\n { left: 0, top: 0 }\n );\n\n switch (this.placement) {\n case 'top':\n this.indicator.style.width = `calc(${width}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-large)' : '0px' })`;\n this.indicator.style.height = 'auto';\n this.indicator.style.translate = `calc(${isRtl ? '-' : ''}1 * (${offset.left}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-large)' : '0px' }))`;\n break;\n\n case 'start':\n case 'end':\n this.indicator.style.width = 'auto';\n this.indicator.style.height = `calc(${height}px - ${ (this.contained || this.sharp) ? '2 * var(--syn-spacing-small)' : '0px' })`;\n this.indicator.style.translate = `0 calc(${offset.top}px + ${ (this.contained || this.sharp) ? 'var(--syn-spacing-small)' : '0px' })`;\n break;\n }\n }\n\n // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n private syncTabsAndPanels() {\n this.focusableTabs = this.tabs.filter(el => !el.disabled);\n this.syncIndicator();\n\n // After updating, show or hide scroll controls as needed\n this.updateComplete.then(() => this.updateScrollControls());\n }\n\n private findNextFocusableTab(currentIndex: number, direction: 'forward' | 'backward') {\n let nextTab = null;\n const iterator = direction === 'forward' ? 1 : -1;\n let nextIndex = currentIndex + iterator;\n\n while (currentIndex < this.tabs.length) {\n nextTab = this.tabs[nextIndex] || null;\n\n if (nextTab === null) {\n // This is where wrapping happens. If we're moving forward and get to the end, then we jump to the beginning. If we're moving backward and get to the start, then we jump to the end.\n if (direction === 'forward') {\n nextTab = this.focusableTabs[0];\n } else {\n nextTab = this.focusableTabs[this.focusableTabs.length - 1];\n }\n break;\n }\n\n if (!nextTab.disabled) {\n break;\n }\n\n nextIndex += iterator;\n }\n\n return nextTab;\n }\n\n /**\n * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so\n * we add one pixel of wiggle room to our calculations.\n */\n private scrollOffset = 1;\n\n @eventOptions({ passive: true })\n private updateScrollButtons() {\n if (this.hasScrollControls && !this.fixedScrollControls) {\n this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset;\n this.shouldHideScrollEndButton = this.isScrolledToEnd();\n }\n }\n\n private isScrolledToEnd() {\n return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset;\n }\n\n private scrollFromStart() {\n return this.localize.dir() === 'rtl' ? -this.nav.scrollLeft : this.nav.scrollLeft;\n }\n\n @watch('noScrollControls', { waitUntilFirstUpdate: true })\n updateScrollControls() {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However,\n // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely.\n // Adding a single pixel to the comparison seems to resolve it.\n //\n // See https://github.com/synergy-design-system/synergy/issues/1839\n this.hasScrollControls =\n ['top'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1;\n }\n\n this.updateScrollButtons();\n }\n\n @watch('placement', { waitUntilFirstUpdate: true })\n syncIndicator() {\n const tab = this.getActiveTab();\n\n if (tab) {\n this.indicator.style.display = 'block';\n this.repositionIndicator();\n } else {\n this.indicator.style.display = 'none';\n }\n }\n\n /** Shows the specified tab panel. */\n show(panel: string) {\n const tab = this.tabs.find(el => el.panel === panel);\n\n if (tab) {\n this.setActiveTab(tab, { scrollBehavior: 'smooth' });\n }\n }\n\n preventFocus(e: MouseEvent) {\n e.preventDefault();\n }\n \n render() {\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'tab-group': true,\n 'tab-group--top': this.placement === 'top',\n 'tab-group--start': this.placement === 'start',\n 'tab-group--end': this.placement === 'end',\n 'tab-group--rtl': this.localize.dir() === 'rtl',\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n 'tab-group--contained': this.contained,\n 'tab-group--sharp': this.sharp,\n })}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\" part=\"nav\">\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--start\"\n exportparts=\"base:scroll-button__base\"\n class=${classMap({\n 'tab-group__scroll-button': true,\n 'tab-group__scroll-button--start': true,\n 'tab-group__scroll-button--start--hidden': this.shouldHideScrollStartButton\n })}\n name=\"chevron-right\"\n library=\"system\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n label=${this.localize.term('scrollToStart')}\n @mousedown=${this.preventFocus}\n @click=${this.handleScrollToStart}\n ></syn-icon-button>\n `\n : ''}\n\n <div class=\"tab-group__nav\" @scrollend=${this.updateScrollButtons}>\n <div part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <div part=\"active-tab-indicator\" class=\"tab-group__indicator\"></div>\n <syn-resize-observer @syn-resize=${this.syncIndicator}>\n <slot name=\"nav\" @slotchange=${this.syncTabsAndPanels}></slot>\n </syn-resize-observer>\n </div>\n </div>\n\n ${this.hasScrollControls\n ? html`\n <syn-icon-button\n part=\"scroll-button scroll-button--end\"\n exportparts=\"base:scroll-button__base\"\n class=${classMap({\n 'tab-group__scroll-button': true,\n 'tab-group__scroll-button--end': true,\n 'tab-group__scroll-button--end--hidden': this.shouldHideScrollEndButton\n })}\n name=\"chevron-right\"\n library=\"system\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n label=${this.localize.term('scrollToEnd')}\n @mousedown=${this.preventFocus}\n @click=${this.handleScrollToEnd}\n ></syn-icon-button>\n `\n : ''}\n </div>\n\n <slot part=\"body\" class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'syn-tab-group': SynTabGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/radio-group/radio-group.component.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n customErrorValidityState,\n FormControlController,\n validValidityState,\n valueMissingValidityState\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport customStyles from './radio-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@enableDefaultSettings('SynRadioGroup')\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n static dependencies = { 'syn-button-group': SynButtonGroup };\n\n protected readonly formControlController = new FormControlController(this);\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n private validationTimeout: number;\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value = '';\n\n /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return customErrorValidityState;\n } else if (isRequiredAndEmpty) {\n return valueMissingValidityState;\n }\n\n return validValidityState;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (hasCustomValidityMessage) {\n return this.customValidityMessage;\n } else if (isRequiredAndEmpty) {\n return this.validationInput.validationMessage;\n }\n\n return '';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (!target || target.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.setAttribute('tabindex', '-1');\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].setAttribute('tabindex', '0');\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('syn-change');\n this.emit('syn-input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n this.focus();\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private async syncRadioElements() {\n const radios = this.getAllRadios();\n\n await Promise.all(\n // Sync the checked state and size\n radios.map(async radio => {\n await radio.updateComplete;\n radio.checked = radio.value === this.value;\n radio.size = this.size;\n })\n );\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n if (radios.length > 0 && !radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n if (buttonRadio) {\n buttonRadio.setAttribute('tabindex', '0');\n }\n } else {\n radios[0].setAttribute('tabindex', '0');\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n if (buttonGroup) {\n buttonGroup.disableRole = true;\n }\n }\n }\n\n private syncRadios() {\n if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n return;\n }\n\n if (customElements.get('syn-radio')) {\n this.syncRadioElements();\n } else {\n customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n }\n\n if (customElements.get('syn-radio-button')) {\n this.syncRadioElements();\n } else {\n // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n this.formControlController.setValidity(this.validity.valid);\n }\n\n @watch('size', { waitUntilFirstUpdate: true })\n handleSizeChange() {\n this.syncRadios();\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n const isRequiredAndEmpty = this.required && !this.value;\n const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n if (isRequiredAndEmpty || hasCustomValidityMessage) {\n this.formControlController.emitInvalidEvent();\n return false;\n }\n\n return true;\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity(): boolean {\n const isValid = this.validity.valid;\n\n this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n this.formControlController.setValidity(isValid);\n this.validationInput.hidden = true;\n clearTimeout(this.validationTimeout);\n\n if (!isValid) {\n // Show the browser's constraint validation message\n this.validationInput.hidden = false;\n this.validationInput.reportValidity();\n this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;\n }\n\n return isValid;\n }\n\n /** Sets a custom validation message. Pass an empty string to restore validity. */\n setCustomValidity(message = '') {\n this.customValidityMessage = message;\n this.errorMessage = message;\n this.validationInput.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n /** Sets focus on the radio-group. */\n public focus(options?: FocusOptions) {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const firstEnabledRadio = radios.find(radio => !radio.disabled);\n const radioToFocus = checked || firstEnabledRadio;\n\n // Call focus for the checked radio\n // If no radio is checked, focus the first one that is not disabled\n if (radioToFocus) {\n radioToFocus.focus(options);\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n const defaultSlot = html`\n <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n `;\n\n return html`\n <fieldset\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n @invalid=${this.handleInvalid}\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n ${defaultSlot}\n </syn-button-group>\n `\n : defaultSlot}\n </div>\n\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </fieldset>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/prio-nav/prio-nav.component.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './prio-nav.styles.js';\nimport SynDropdown from '../dropdown/dropdown.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynMenu from '../menu/menu.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport {\n filterOnlyNavItems,\n getAssignedElementsForSlot,\n hideNavigationItem,\n showNavigationItem,\n} from './utils.js';\n\n/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @example\n * <syn-prio-nav>\n * <syn-nav-item current horizontal>Item 1</syn-nav-item>\n * <button role=\"menuitem\">Item 2 (custom)</button>\n * <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n * or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n * if there is not enough space.\n *\n */\nexport default class SynPrioNav extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles];\n\n static dependencies = {\n 'syn-dropdown': SynDropdown,\n 'syn-icon': SynIcon,\n 'syn-menu': SynMenu,\n 'syn-nav-item': SynNavItem,\n };\n\n /**\n * Internal resize observer\n */\n private resizeObserver: ResizeObserver;\n\n private readonly localize = new LocalizeController(this);\n\n /**\n * Reference to the rendered children slot\n */\n @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n /**\n * Reference to the slot where priority menu items are placed\n */\n @query('slot[name=menu]') private menuSlot: HTMLSlotElement;\n\n /**\n * The wrapper that holds the horizontal navigation items\n */\n @query('.horizontal-nav') private horizontalNav: HTMLDivElement;\n\n /**\n * The priority menu dropdown\n */\n @query('.priority-menu') private priorityMenu: SynDropdown;\n\n /**\n * Internal state reflecting if the item positions have been cached\n */\n @state() private itemPositionsCached = false;\n\n /**\n * The amount of nav items that are currently slotted\n */\n @state() private amountOfNavItems = 0;\n\n /**\n * The amount of items that are currently visible\n */\n @state() private amountOfVisibleItems = 0;\n\n /**\n * Internal state reflecting if there are items in the priority menu\n */\n @state() private hasItemsInDropdown = false;\n\n /**\n * Get a list of all slotted `<syn-nav-item />` elements\n * that are either in the main slot or the priority menu slot\n */\n private getSlottedNavItems() {\n const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));\n const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));\n return navItemsInDefaultSlot.concat(navItemsInMenuSlot);\n }\n\n /**\n * Cache the items right offset position to make faster checks placement into priority menu\n * @param items The items to cache the position for\n */\n private cacheItemPositions(items: SynNavItem[]) {\n const { left } = this.horizontalNav.getBoundingClientRect();\n items.forEach(item => {\n // We have to measure while the items are in the primary slot,\n // else we will just get the placement in the priority menu\n item.removeAttribute('slot');\n const { right } = item.getBoundingClientRect();\n // We also need to consider the location of the parent\n item.dataset.right = (right - left).toString();\n });\n\n this.itemPositionsCached = true;\n }\n\n /**\n * Determines which items should be shown or hidden, depending on the current width\n */\n private handlePriorityMenu() {\n const navItems = this.getSlottedNavItems();\n\n if (!this.itemPositionsCached) {\n this.cacheItemPositions(navItems);\n }\n\n // Get the widths of the horizontal nav and the priority menu\n // We subtract the width of the priority menu to get the final width\n const { width } = this.horizontalNav.getBoundingClientRect();\n\n // #651: Do not take the size of the priority menu\n // into account when it is hidden\n const reservedPrioMenuSize = this.priorityMenu.classList.contains('priority-menu--hidden')\n ? 0\n : this.priorityMenu.clientWidth;\n\n const finalWidth = width - reservedPrioMenuSize;\n\n // Cache the first item that should be hidden\n let firstHiddenItemRightPos: number | undefined;\n\n // Cache the last item so we can decide to use the finalWidth or just the width\n // later on. This is needed as otherwise the last item will be hidden when using finalWidth\n const lastNavItem = navItems.at(-1);\n\n const itemVisibilities = navItems.map(item => {\n const measureWidth = item === lastNavItem ? width : finalWidth;\n const isHidden = !!(\n firstHiddenItemRightPos\n || parseFloat(item.dataset.right!) > measureWidth\n );\n\n // Get the position of the first item\n // Will get used to position the priority menu\n if (isHidden && !firstHiddenItemRightPos) {\n firstHiddenItemRightPos = parseFloat(item.dataset.right!);\n }\n\n return {\n isHidden,\n item,\n };\n });\n\n const visibleItems = itemVisibilities.filter(({ isHidden }) => !isHidden).length;\n const hasOnlyOneItem = visibleItems === 1;\n\n // Finally, hide or show the items based on the visibility\n // As requested in #410, we hide all items if there is only one item\n itemVisibilities.forEach(({ item, isHidden }) => {\n if (isHidden || hasOnlyOneItem) {\n hideNavigationItem(item);\n } else {\n showNavigationItem(item);\n }\n });\n\n // Tell the render call that we have items in the priority menu\n // and toggle the visibility of the priority menu label\n this.hasItemsInDropdown = visibleItems !== navItems.length;\n this.amountOfVisibleItems = hasOnlyOneItem ? 0 : visibleItems;\n }\n\n private renderPriorityMenu() {\n return html`\n <syn-dropdown\n class=${classMap({\n 'priority-menu': true,\n 'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,\n 'priority-menu--hidden': !this.hasItemsInDropdown,\n })}\n part=\"priority-menu\"\n placement=\"bottom-end\"\n >\n <syn-nav-item class=\"priority-menu__nav-item\" slot=\"trigger\" horizontal part=\"priority-menu-nav-item\">\n <syn-icon \n class=\"priority-menu__icon\"\n label=\"More\"\n library=\"system\"\n name=\"more\"\n part=\"priority-menu-icon\"\n slot=\"prefix\"\n >\n </syn-icon>\n <span\n class=${classMap({\n 'priority-menu__label': true,\n 'priority-menu__label--visible': this.amountOfVisibleItems === 0,\n })}\n part=\"priority-menu-label\"\n >\n ${this.localize.term('menu')}\n </span>\n </syn-nav-item>\n\n <syn-menu part=\"priority-menu-container\">\n <slot name=\"menu\"></slot>\n </syn-menu>\n\n </syn-dropdown>\n `;\n }\n\n private slotChange() {\n const slottedItems = this.getSlottedNavItems();\n\n // Make sure to trigger a recalculation of the item positions if we a new list of slotted items\n if (slottedItems.length !== this.amountOfNavItems) {\n this.cacheItemPositions(slottedItems);\n this.handlePriorityMenu();\n this.amountOfNavItems = slottedItems.length;\n }\n }\n\n protected firstUpdated() {\n // Cache the original role of the items so we can reset it if needed.\n this.getSlottedNavItems().forEach(item => {\n item.dataset.originalRole = item.getAttribute('role') ?? '';\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());\n this.resizeObserver.observe(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n render() {\n /* eslint-disable @typescript-eslint/unbound-method */\n return html`\n <nav class=\"horizontal-nav\" part=\"base\">\n <slot @slotchange=${this.slotChange}></slot>\n ${this.renderPriorityMenu()}\n </nav>\n `;\n /* eslint-enable @typescript-eslint/unbound-method */\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-button/icon-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 { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.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 './icon-button.styles.js';\nimport customStyles from './icon-button.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n@enableDefaultSettings('SynIconButton')\nexport default class SynIconButton extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n @state() private hasFocus = false;\n\n /** The name of the icon to draw. Available names depend on the icon library being used. */\n @property() name?: string;\n\n /** The name of a registered custom icon library. */\n @property() library?: 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 /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n @property() href?: string;\n\n /** Tells the browser where to open the link. Only used when `href` is set. */\n @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n @property() download?: string;\n\n /**\n * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n * that describes what the icon button does.\n */\n @property() label = '';\n\n /** The icon button's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';\n\n /**\n * The color of the icon button.\n * The default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.\n */\n @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral' = 'currentColor';\n\n /** Disables the button. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n /** Simulates a click on the icon button. */\n click() {\n this.button.click();\n }\n\n /** Sets focus on the icon button. */\n focus(options?: FocusOptions) {\n this.button.focus(options);\n }\n\n /** Removes focus from the icon button. */\n blur() {\n this.button.blur();\n }\n\n render() {\n const isLink = this.href ? true : false;\n const tag = isLink ? literal`a` : literal`button`;\n\n /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n return html`\n <${tag}\n part=\"base\"\n class=${classMap({\n 'icon-button': true,\n 'icon-button--disabled': !isLink && this.disabled,\n 'icon-button--focused': this.hasFocus,\n 'icon-button--small': this.size === 'small',\n 'icon-button--medium': this.size === 'medium',\n 'icon-button--large': this.size === 'large',\n })}\n ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n type=${ifDefined(isLink ? undefined : 'button')}\n href=${ifDefined(isLink ? this.href : undefined)}\n target=${ifDefined(isLink ? this.target : undefined)}\n download=${ifDefined(isLink ? this.download : undefined)}\n rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n role=${ifDefined(isLink ? undefined : 'button')}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-label=\"${this.label}\"\n tabindex=${this.disabled ? '-1' : '0'}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n >\n <syn-icon\n class=\"icon-button__icon\"\n name=${ifDefined(this.name)}\n library=${ifDefined(this.library)}\n src=${ifDefined(this.src)}\n aria-hidden=\"true\"\n ></syn-icon>\n </${tag}>\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/textarea/textarea.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 './textarea.styles.js';\nimport customStyles from './textarea.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 Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. 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 an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control 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 form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\n@enableDefaultSettings('SynTextarea')\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n\n private readonly formControlController = new FormControlController(this, {\n assumeInteractionOn: ['syn-blur', 'syn-input']\n });\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private resizeObserver: ResizeObserver;\n\n @query('.textarea__control') input: HTMLTextAreaElement;\n @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;\n\n @state() private hasFocus = false;\n @property() title = ''; // make reactive to pass through\n\n /** The name of the textarea, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the textarea, submitted as a name/value pair with form data. */\n @property() value = '';\n\n /** The textarea's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n @property() label = '';\n\n /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** Placeholder text to show as a hint when the input is empty. */\n @property() placeholder = '';\n\n /** The number of rows to display by default. */\n @property({ type: Number }) rows = 4;\n\n /** Controls how the textarea can be resized. */\n @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n /** Disables the textarea. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes the textarea readonly. */\n @property({ type: Boolean, reflect: true }) readonly = 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 textarea a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** The minimum length of input that will be considered valid. */\n @property({ type: Number }) minlength: number;\n\n /** The maximum length of input that will be considered valid. */\n @property({ type: Number }) maxlength: number;\n\n /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n /** Indicates whether the browser's autocorrect feature is on or off. */\n @property() autocorrect: string;\n\n /**\n * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n */\n @property() autocomplete: string;\n\n /** Indicates that the input should receive focus on page load. */\n @property({ type: Boolean }) autofocus: boolean;\n\n /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /** Enables spell checking on the textarea. */\n @property({\n type: Boolean,\n converter: {\n // Allow \"true|false\" attribute values but keep the property boolean\n fromAttribute: value => (!value || value === 'false' ? false : true),\n toAttribute: value => (value ? 'true' : 'false')\n }\n })\n spellcheck = true;\n\n /**\n * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n * keyboard on supportive devices.\n */\n @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue() defaultValue = '';\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 connectedCallback() {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n this.updateComplete.then(() => {\n this.setTextareaHeight();\n this.resizeObserver.observe(this.input);\n });\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.input) {\n this.resizeObserver?.unobserve(this.input);\n }\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleChange() {\n this.value = this.input.value;\n this.setTextareaHeight();\n this.emit('syn-change');\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n private handleInput() {\n this.value = this.input.value;\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 setTextareaHeight() {\n if (this.resize === 'auto') {\n // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]\n this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;\n this.input.style.height = 'auto';\n this.input.style.height = `${this.input.scrollHeight}px`;\n } else {\n this.input.style.height = '';\n }\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('rows', { waitUntilFirstUpdate: true })\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @watch('value', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n this.formControlController.updateValidity();\n this.setTextareaHeight();\n }\n\n /** Sets focus on the textarea. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the textarea. */\n blur() {\n this.input.blur();\n }\n\n /** Selects all the text in the textarea. */\n select() {\n this.input.select();\n }\n\n /** Gets or sets the textarea's scroll position. */\n scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n if (position) {\n if (typeof position.top === 'number') this.input.scrollTop = position.top;\n if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n return undefined;\n }\n\n return {\n top: this.input.scrollTop,\n left: this.input.scrollTop\n };\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n setRangeText(\n replacement: string,\n start?: number,\n end?: number,\n selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n ) {\n const selectionStart = start ?? this.input.selectionStart;\n const selectionEnd = end ?? this.input.selectionEnd;\n\n this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n if (this.value !== this.input.value) {\n this.value = this.input.value;\n this.setTextareaHeight();\n }\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n 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 hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div\n part=\"base\"\n class=${classMap({\n textarea: true,\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n 'textarea--standard': !this.readonly,\n 'textarea--readonly': this.readonly,\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': !this.value,\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto'\n })}\n >\n <textarea\n part=\"textarea\"\n id=\"input\"\n class=\"textarea__control\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${ifDefined(this.name)}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocapitalize=${ifDefined(this.autocapitalize)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n enterkeyhint=${ifDefined(this.enterkeyhint)}\n inputmode=${ifDefined(this.inputmode)}\n aria-describedby=\"help-text\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n ></textarea>\n <!-- This \"adjuster\" exists to prevent layout shifting. https://github.com/synergy-design-system/synergy/issues/2180 -->\n <div part=\"textarea-adjuster\" class=\"textarea__size-adjuster\" ?hidden=${this.resize !== 'auto'}></div>\n </div>\n </div>\n\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/breadcrumb/breadcrumb.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 { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.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 './breadcrumb.styles.js';\nimport customStyles from './breadcrumb.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';\n\n/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://synergy.style/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n *\n * @dependency syn-icon\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynBreadcrumb extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon': SynIcon };\n\n private readonly localize = new LocalizeController(this);\n private separatorDir = this.localize.dir();\n\n @query('slot') defaultSlot: HTMLSlotElement;\n @query('slot[name=\"separator\"]') separatorSlot: HTMLSlotElement;\n\n /**\n * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\n * screen readers and other assistive devices to provide more context for users.\n */\n @property() label = '';\n\n // Generates a clone of the separator element to use for each breadcrumb item\n private getSeparator() {\n const separator = this.separatorSlot.assignedElements({ flatten: true })[0] as HTMLElement;\n\n // Clone it, remove ids, and slot it\n const clone = separator.cloneNode(true) as HTMLElement;\n [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));\n clone.setAttribute('data-default', '');\n clone.slot = 'separator';\n\n return clone;\n }\n\n private handleSlotChange() {\n const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n item => item.tagName.toLowerCase() === 'syn-breadcrumb-item'\n ) as SynBreadcrumbItem[];\n\n items.forEach((item, index) => {\n // Append separators to each item if they don't already have one\n const separator = item.querySelector('[slot=\"separator\"]');\n if (separator === null) {\n // No separator exists, add one\n item.append(this.getSeparator());\n } else if (separator.hasAttribute('data-default')) {\n // A default separator exists, replace it\n separator.replaceWith(this.getSeparator());\n } else {\n // The user provided a custom separator, leave it alone\n }\n\n // The last breadcrumb item is the \"current page\"\n if (index === items.length - 1) {\n item.setAttribute('aria-current', 'page');\n } else {\n item.removeAttribute('aria-current');\n }\n });\n }\n\n render() {\n // We clone the separator and inject them into breadcrumb items, so we need to regenerate the default ones when\n // directionality changes. We do this by storing the current separator direction, waiting for render, then calling\n // the function that regenerates them.\n if (this.separatorDir !== this.localize.dir()) {\n this.separatorDir = this.localize.dir();\n this.updateComplete.then(() => this.handleSlotChange());\n }\n\n return html`\n <nav part=\"base\" class=\"breadcrumb\" aria-label=${this.label}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </nav>\n\n <span hidden aria-hidden=\"true\">\n <slot name=\"separator\">\n <syn-icon name=\"chevron-down\" library=\"system\" class=${this.localize.dir()}></syn-icon>\n </slot>\n </span>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAsBhC,IAAqB,gBAArB,cAA2C,eAAe;AAAA,EAA1D;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AACvD,SAAQ,eAAe,KAAK,SAAS,IAAI;AAS7B,iBAAQ;AAAA;AAAA;AAAA,EAGZ,eAAe;AACrB,UAAM,YAAY,KAAK,cAAc,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,CAAC;AAG1E,UAAM,QAAQ,UAAU,UAAU,IAAI;AACtC,KAAC,OAAO,GAAG,MAAM,iBAAiB,MAAM,CAAC,EAAE,QAAQ,QAAM,GAAG,gBAAgB,IAAI,CAAC;AACjF,UAAM,aAAa,gBAAgB,EAAE;AACrC,UAAM,OAAO;AAEb,WAAO;AAAA,EACT;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,EAAE;AAAA,MACtE,UAAQ,KAAK,QAAQ,YAAY,MAAM;AAAA,IACzC;AAEA,UAAM,QAAQ,CAAC,MAAM,UAAU;AAE7B,YAAM,YAAY,KAAK,cAAc,oBAAoB;AACzD,UAAI,cAAc,MAAM;AAEtB,aAAK,OAAO,KAAK,aAAa,CAAC;AAAA,MACjC,WAAW,UAAU,aAAa,cAAc,GAAG;AAEjD,kBAAU,YAAY,KAAK,aAAa,CAAC;AAAA,MAC3C,OAAO;AAAA,MAEP;AAGA,UAAI,UAAU,MAAM,SAAS,GAAG;AAC9B,aAAK,aAAa,gBAAgB,MAAM;AAAA,MAC1C,OAAO;AACL,aAAK,gBAAgB,cAAc;AAAA,MACrC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AAIP,QAAI,KAAK,iBAAiB,KAAK,SAAS,IAAI,GAAG;AAC7C,WAAK,eAAe,KAAK,SAAS,IAAI;AACtC,WAAK,eAAe,KAAK,MAAM,KAAK,iBAAiB,CAAC;AAAA,IACxD;AAEA,WAAO;AAAA,uDAC4C,KAAK,KAAK;AAAA,4BACrC,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,iEAKgB,KAAK,SAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlF;AACF;AA7EqB,cACZ,SAAyB,CAAC,0BAAiB,2BAAQ,gCAAY;AADnD,cAEZ,eAAe,EAAE,YAAY,QAAQ;AAK7B;AAAA,EAAd,MAAM,MAAM;AAAA,GAPM,cAOJ;AACkB;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GARZ,cAQc;AAMrB;AAAA,EAAX,SAAS;AAAA,GAdS,cAcP;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/tag/tag.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 } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tag.styles.js';\nimport customStyles from './tag.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n@enableDefaultSettings('SynTag')\nexport default class SynTag extends SynergyElement {\n static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n static dependencies = { 'syn-icon-button': SynIconButton };\n\n private readonly localize = new LocalizeController(this);\n\n /** The tag's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Makes the tag removable and shows a remove button. */\n @property({ type: Boolean }) removable = false;\n\n private handleRemoveClick() {\n this.emit('syn-remove');\n }\n\n render() {\n return html`\n <span\n part=\"base\"\n class=${classMap({\n tag: true,\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifiers\n 'tag--removable': this.removable\n })}\n >\n <slot part=\"content\" class=\"tag__content\"></slot>\n\n ${this.removable\n ? html`\n <syn-icon-button\n part=\"remove-button\"\n exportparts=\"base:remove-button__base\"\n name=\"x-lg\"\n library=\"system\"\n label=${this.localize.term('remove')}\n class=\"tag__remove\"\n @click=${this.handleRemoveClick}\n tabindex=\"-1\"\n ></syn-icon-button>\n `\n : ''}\n </span>\n `;\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AA2BzB,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAG1B,gBAAqC;AAGrC,qBAAY;AAAA;AAAA,EAEjC,oBAAoB;AAC1B,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA;AAAA,MAGL,cAAc,KAAK,SAAS;AAAA,MAC5B,eAAe,KAAK,SAAS;AAAA,MAC7B,cAAc,KAAK,SAAS;AAAA;AAAA,MAG5B,kBAAkB,KAAK;AAAA,IACzB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIA,KAAK,YACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,QAAQ,CAAC;AAAA;AAAA,yBAE3B,KAAK,iBAAiB;AAAA;AAAA;AAAA,gBAInC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAnDqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAK5B;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPR,OAOU;AAGA;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,OAUU;AAVV,SAArB;AAAA,EADC,sBAAsB,QAAQ;AAAA,GACV;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|